# git 配置 > `git` 配置文件为：`~/.gitconfig`，下文涉及到的配置便在该文件中 ### git alias 配置 有一个小技巧可以使你的 `Git `体验更简单、容易、熟悉：别名。 `Git `并不会在你输入部分命令时自动推断出你想要的命令。 如果不想每次都输入完整的 `Git `命令，可以通过 `git config` 文件来轻松地为每一个命令设置一个别名。 这里有一些例子你可以试试： ```shell br = branch cm = commit ck = checkout ``` 这意味着，当要输入 `git commit` 时，只需要输入 `git cm` 随着你继续不断地使用 Git，可能也会经常使用其他命令，所以创建别名时不要犹豫。 可以看出，`Git` 只是简单地将别名替换为对应的命令。 然而，你可能想要执行外部命令，而不是一个 `Git `子命令。 如果是那样的话，可以在命令前面加入 ! 符号。 如果你自己要写一些与 `Git `仓库协作的工具的话，那会很有用。 我们现在演示将 `git alias` 定义为 `git 查看别名`的 的别名： ```shell alias = ! git config --get-regexp ^alias\. | sed -e s/^alias\.// -e s/\ /\ =\ / ``` 我的完整别名配置如下 ```shell # 通过更友好的界面来查看日志 lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit # 简化 git status 的长度 st = status # 使用 vimdiff 进行代码对比 dft = difftool -t vimdiff # 简化 git 子命令 长度 br = branch cm = commit ck = checkout cp = cherry-pick cr = cherry -v pom = pull origin master # 于创建了查看别名的子命令，通过调用 git config 实现 alias = ! git config --get-regexp ^alias\. | sed -e s/^alias\.// -e s/\ /\ =\ / ``` <ImgView title="git alias 配置" url="https://z.wiki/images/20220204/da2b9ec480b74e9e95ecfd5d59572d7a.png" /> ### git 其他配置 另外，相较`git`内置对比工具，`vimdiff`更为强大、便利，一下配置是将对比工具进行了替换 ```shell [merge] tool = vimdiff [diff] tool = vimdiff ``` <ImgView title="git 其他配置" url="https://z.wiki/images/20220204/17be65c295f44100bb7802a6f43d8ec0.png" /> ### git 配置安装器 如果想使用我以上的配置，可以直接想配置复制到`.gitconfig`文件中 另外，我也提供了安装工具，通过运行安装工具可以快速配置好以上功能 #### 安装 git-config-installer 安装器（git-config-installer）只负责提供一个可执行程序，安装后还需手动执行该可执行程序（`git_config_install` 命令） ```shell npm install -g git-config-installer ``` #### 安装 git 配置 运行 `git_config_install` 命令 ````shell git_config_install ```` <ImgView title="安装 git 配置" url="https://4.z.wiki/images/20220204/0639584cfc374fcfb613b042f6363780.gif" /> 到此，`.gitconfig` 文件中已添加好上文提到的别名，可以欢乐的使用别名啦~~~ <ImgView title="git" url="https://z.wiki/images/20220204/10d124cd03274d1c894dee857e5203c0.png" /> <ImgView title="安装 git 配置" url="https://z.wiki/images/20220204/26dc7d023d384894827a35c6be8a1e85.gif" />

# find 并执行其他命令 先通过`find`查找文件并对文件执行特定命令 通过`-exec`选项实现 ```shell find . -type f -exec ls -l {} ; ``` 通过`xargs`实现 ```shell find . -maxdepth 1 -name "*.log" | xargs -i du -hs {} ``` ### 应用实战一 查找所有项目并自动拉取`master`分支上的最新代码 ```shell find . -type d -depth 1 -exec git --git-dir={}/.git --work-tree=$PWD/{} pull origin master ; ``` ### 应用实战二 查找特定的文件并清空内容 ```shell find . -type f -name "user*" -exec bash -c 'echo 0x0 > {}' ; ``` 找到所有`user`开头的文件，并对每个文件执行脚本`echo 0x0 > {}`清空文件内容， 当脚本执行的时候`{}`会被动态替换成当前文件名， 最后结尾的`;`表示该分号是执行子命令的内容，不是`find`需要处理的分号。

# 手机写博客 <PhoneSnapshot url="https://z.wiki/autoupload/2022-09-12/2c6aadcad41f45e5949378a80ec74cba.95f77c3374684fb59eca84ba1321daa0.052EC7A2-926B-4B17-93A5-76D1E9AC3155.jpeg" title="手机写博客" alt="手机写博客" /> <PhoneSnapshot url="https://z.wiki/autoupload/2022-09-12/87c9401971d746d4bbef73b69d413bb2.6EC0C782-6B1C-41A0-A62B-2C6C24D52722.png" title="手机写博客" alt="手机写博客" /> 感觉还行😂😂 _ ---- 2022年11月30日更新 写个博客或前端还行，如果是`java`的话，还得在服务器上安装`gnome`桌面、安装`idea`并通过`vnc`远程登录开发。: "回复:&quot;可以试试iVim，里面的键盘挺好使的。git同步啥的用iSH，ssh的话用Blink。&quot; ------------ 学到了👍", : "层主说的应该是左下角显示按了哪些按键，不知道是不是用的、keyCastr", : "没看懂，我怎么看到我的键盘的？这个回复不太好用，我看不出来你回复的那篇文章", : "这是这个 terminus 软件自带的，不是键盘的一部分", : "博主的键盘怎么在上面显示{} ctrl那些键的", : "没看懂，我怎么看到我的键盘的？这个回复不太好用，我看不出来你回复的那篇文章", : "博主的键盘怎么在上面显示{} ctrl那些键的", : "博主的键盘怎么在上面显示{} ctrl那些键的", : "学到了，感谢😀😀", : "可以试试iVim，里面的键盘挺好使的。git同步啥的用iSH，ssh的话用Blink。", : "可以试试iVim，里面的键盘挺好使的。git同步啥的用iSH，ssh的话用Blink。",

# 终端工具推荐 ### fzf `fzf`是一款使用`GO`语言编写的交互式的`Unix`命令行工具。 可以用来查找任何 列表内容、文件、历史命令、 本机绑定的`host`、 进程、`Git`分支、进程 等。所有的命令行工具可以生成列表输出的都可以再通过管道`pipe`到`fzf`上进行搜索和查找 <ImgView title="fzf" url="https://8.z.wiki/images/20220318/85ed7eeda5f8490794630145886067fa.gif" /> [github](https://github.com/junegunn/fzf) ```shell brew install fzf ``` ### rg 快速、多用途的代码搜索工具 常用选项： ``` -A, --after-context <NUM> Show NUM lines after each match. -B, --before-context <NUM> Show NUM lines before each match. -s, --case-sensitive Search case sensitively (default). -f, --file <PATTERNFILE>... Search for patterns from the given file. -M, --max-columns <NUM> Don't print lines longer than this limit. -m, --max-count <NUM> Limit the number of matches. ``` 前端经常有编辑后的`js`文件都压缩成一行，使用`-M`可以避免控制台大量输出内容。 #### 安装 ```shell brew install ripgrep ``` [github](https://github.com/BurntSushi/ripgrep) ### loc `lines of code`,快速统计代码行数的工具 <ImgView title="终端推荐" url="https://z.wiki/images/20220318/eb49ea01501344e688d39e31bfe59013.png" /> #### 安装 安装：[点此 github](https://github.com/cgag/loc/releases)(或[国内镜像](https://z.wiki/autoupload/2022-09-14/62d62f3479a64502ab11fc04dfa746a4.loc-v0.3.4-x86_64-unknown-linux-gnu.tar.gz.zip))下载可执行程序 ```shell brew install loc ``` ### http-server [npm http-server](https://www.npmjs.com/package/http-server) 简单、零配置的命令行静态资源服务器,平时局域网内分享文件、共享本地资源还是很方便的 ```shell # 安装命令 npm install --global http-server ``` ### Oh My Zsh && Zsh `zsh`提供诸如补全、色彩高亮、跳转、历史记录、智能提示等诸多特性 #### 安装 `zsh` ```shell brew install zsh ``` #### 切换默认 `shell` ```shell chsh -s /bin/zsh ``` `Oh My Zsh`则是`zsh`配置管理工具 ```shell sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" ``` ### neovim `vim`的替代配，`vim`是一个非常成功的项目，是一个非常优秀的工具。但过于悠久的历史也成了不小负担，而过去的辉煌也一定程度上成为了前进的枷锁。这导致 `vim` 社区过于保守。现在 `neovim` 和 `vim` 相互竞争，对两者应该都是一个好的事情。让我们试目以待吧。 <ImgView title="neovim" url="https://z.wiki/images/20220318/f6b299ce76f14a36bdb34287bb0b8cc9.png" /> ### jq 轻量级命令行`json`处理器，使用`C`语言开发、零依赖。 <ImgView title="jq" url="https://9.z.wiki/images/20220319/92902799ed1c44e9bca8fa2cbd9fbc73.png" /> ```shell # centos 安装命令 sudo yum install jq # macOS 安装命令 brew info jq ``` ### jless 命令行`json`查看工具，最大的特点是支持折叠。 <ImgView title="jless" url="https://5.z.wiki/autoupload/2022-09-14/a7c95bd5fd0546be85cc5c5f5fa33b81.jless-recording.gif" /> ### mycli `mysql`客户端，支持语法高亮和命令补全，效果类似`ipython`，可以替代`mysql`命令。 <ImgView title="mycli mysql 客户端" url="https://z.wiki/images/20220319/8724416f58714a04906308de93607eb8.png" /> ### fig 终端自动提示工具。 <ImgView title="fig" url="https://4.z.wiki/images/20220319/6d94bfddc24a48d08b12b6c51144b3b9.gif" /> ### tig `git` 提交日志查看工具，以文本形式查看提交历史，[安装方法](https://jonas.github.io/tig/INSTALL.html) <ImgView title="tig" url="https://2.z.wiki/images/20220327/e04486b038f64aaab1effc3fe4cdd6ad.png" /> ### tldr `tdlr` 是 `Too long, Don't read` 的缩写（太长不读、太长不看）， 可以帮助你快速查看常用命令的使用实例，比如 `tar` 命令，那后面一长串参数谁记得清呢？当然，`linux` 大佬除外。 <ImgView title="tldr" url="https://3.z.wiki/images/20220327/6b8f1df8617c4b0b8105c3962fe86819.png" /> ### zsh-autosuggestions `zsh`命令自动补全插件`zsh-autosuggestions` <ImgView title="zsh-autosuggestions" url="https://4.z.wiki/images/20220327/c049aa1a16774e54a99ef7369a860f55.png" /> ### cnpm [cnpm](https://npmmirror.com/) 是阿里定制的命令行工具，用来代替默认的`npm`，同时解决国内访问速度首先的问题，支持 `npm` 除了 `publish` 之外的所有命令。 ### gck [gck](https://npmjs.com/package/gck) 用于切换分枝的神器 <ImgView title="cnpm" url="https://9.z.wiki/autoupload/20221124/UgEU.352X762-RPReplay_Final1669303784.gif" /> #### 安装 ```shell npm install -g gck ``` ### nodemon `nodemon`可是监听文件变化自动重启服务，开发提效工具，可通过`npm`安装 ### siege `siege`是个开源的服务压测工具，地址：[siege](https://github.com/JoeDog/siege) ### stress 服务自身压测工具 ### viu 与 lsix 在终端查看照片的工具，均可以通过`brew`安装。 ps: 只能说，勉强能看😓 <img src="https://z.wiki/autoupload/20230209/wWWi.1362X818-image.png" width="200" alt="viu 看图效果" title="viu 看图效果" />

# GLM-130B huggingface 体验地址: [huggingface](https://huggingface.co/spaces/THUDM/GLM-130B) ### 摘要：何为 GLM-130B？ `GLM-130B` 是一个开源开放的双语（中文和英文）双向稠密模型，拥有 `1300` 亿个参数，模型架构采用通用语言模型（`GLM`）。 它旨在支持在**一台 A100（40G * 8）** 或 **V100（32G * 8）服务器**上对千亿规模的参数进行推理。 截至 2022 年 7 月 3 日，`GLM-130B` 已经对超过 4000 亿个文本标识符（中文和英文各 2000 亿）进行了训练，它有以下独特优势： * **双语**：同时支持中文和英文。 * **任务表现（英文）**： 在 `LAMBADA` 上优于 GPT-3 175B（+4.0%）、OPT-175B（+5.5%）和 BLOOM-176B（+13.0%），在 MMLU 上略优于GPT-3 175B（+0.9%）。 * **任务表现（中文）**：在 7 个零样本 CLUE 数据集（+24.26%）和 5 个零样本 FewCLUE 数据集（+12.75%）上明显优于 ERNIE TITAN 3.0 260B。 * **快速推理**：支持用一台 A100 服务器使用 [SAT](https://github.com/THUDM/SwissArmyTransformer) 和 [FasterTransformer](https://github.com/NVIDIA/FasterTransformer) 进行快速推理（速度最高可达2.5倍）。 * **可复现性**：所有的结果（超过30个任务）都可以用我们开源的代码和模型参数轻松复现。 * **多平台**：支持在 NVIDIA、Hygon DCU、Ascend 910 和 Sunway 处理器上进行训练与推理（代码即将开源）。 由于工作需要，尝试进行部署`GLM-130B`模型，官网：[GLM-130B](https://github.com/THUDM/GLM-130B) ### 申请机器 支持在一台 `A100`（`40G * 8`） 或 `V100`（`32G * 8`）服务器上对千亿规模的参数进行推理 `A100` 机器，`250`元每小时，一个月约：`18W`, <ImgView title="GLM-130B" url="https://1.z.wiki/autoupload/20230606/Mo3u.170X1774-image.png" /> `V100` 机器，`157`元每小时，一个月大约：`11W` <ImgView title="GLM-130B" url="https://1.z.wiki/autoupload/20230606/VMp1.170X1770-image.png" /> 预算有限，就选`V100`机器吧 `1.5T` 的硬盘（模型大小`260G`，需要分包下载，下载后将模型聚合成一个压缩文件，再进行解压， 所以模型需要 `260 * 3 G`的空间） ### 登录机器 `8`个显卡 <ImgView title="GLM-130B" url="https://1.z.wiki/autoupload/20230606/xnpS.1674X1314-image.png" /> `96`核`CPU`, `724G`内存，这么牛逼的机器，我还是第一次体验 <ImgView title="GLM-130B" url="https://1.z.wiki/autoupload/20230606/QJlJ.966X2066-image.png" /> 操作系统：`centos 7.9` <ImgView title="GLM-130B" url="https://1.z.wiki/autoupload/20230606/BThh.195X258-image.png" /> ### 安装必要依赖 ```shell yum update -y yum install dnf -y dnf groupinstall "Development Tools" -y dnf install zlib-devel -y yum install libffi-devel -y yum install bzip2-devel -y yum install openssl-devel -y yum install libX11 -y yum install libXext -y yum install sqlite-devel -y yum install libsqlite3-dev -y yum install axel -y yum install epel-release -y yum install aria2 -y ``` 此外，`GLM-130B`运行需要如下环境： `Python 3.9+` / `PyTorch 1.10+` / `DeepSpeed 0.6+` / `Apex`（需要安装包含 `CUDA` 和 `C++` 扩展的版本，参考资料） 由于`centos 7.9` 默认自带 `python 2.7` `python3.6`所以需要更新`python`版本，这里我选择使用`miniconda`进行环境管理。 [`miniconda` 官网](https://docs.conda.io/en/latest/miniconda.html) 安装流程： ```shell wget https://z.wiki/autoupload/20230606/gI1w.Miniconda3-latest-Linux-x86_64.sh sh gI1w.Miniconda3-latest-Linux-x86_64.sh conda -V ``` ### 创建 python3.9 运行环境 ```shell conda create -n py39 python=3.9 ``` 查看环境 ```shell conda env list ``` 切换环境 ```shell conda activate py39 ``` ### 安装 apex ```shell cd ~ git clone https://github.com/NVIDIA/apex cd apex pip install -v --disable-pip-version-check --no-cache-dir --global-option="--cpp_ext" --global-option="--cuda_ext" ./ ``` 😅报错了。。。。 ```shell RuntimeError: Cuda extensions are being compiled with a version of Cuda that does not match the version used to compile Pytorch binaries. Pytorch binaries were compiled with Cuda 11.7. In some cases, a minor-version mismatch will not cause later errors: https://github.com/NVIDIA/apex/pull/323#discussion_r287021798. You can try commenting out this check (at your own risk). error: subprocess-exited-with-error × Running setup.py install for apex did not run successfully. │ exit code: 1 ╰─> See above for output. ``` 从提示中可以看出`Pytorch`中要求`Cuda 11.7`，那机器上的`Cuda`是什么版本呢？,执行`nvcc -V`： ```shell nvcc: NVIDIA (R) Cuda compiler driver Copyright (c) 2005-2021 NVIDIA Corporation Built on Wed_Jul_14_19:41:19_PDT_2021 Cuda compilation tools, release 11.4, V11.4.100 Build cuda_11.4.r11.4/compiler.30188945_0 ``` 果然，二者不匹配了。那就安装`Cuda 11.7`吧，从英伟达官网就能找到安装脚本： <ImgView title="130b" url="https://z.wiki/autoupload/20230606/f9jw.2496X2822-image.png" /> ```shell wget https://developer.download.nvidia.com/compute/cuda/11.7.0/local_installers/cuda-repo-rhel7-11-7-local-11.7.0_515.43.04-1.x86_64.rpm rpm -i cuda-repo-rhel7-11-7-local-11.7.0_515.43.04-1.x86_64.rpm yum clean all yum -y install nvidia-driver-latest-dkms cuda yum -y install cuda-drivers ``` 到此，`Cuda 11.7`已安装完成，安装路径：`/usr/local/cuda-11.7`,通过设置`CUDA_HOME`这个环境变量后继续安装依赖： ```shell export CUDA_HOME=/usr/local/cuda-11.7/ pip install -v --disable-pip-version-check --no-cache-dir --global-option="--cpp_ext" --global-option="--cuda_ext" ./ ``` 😅+1，还得升级`g++`，搞起！！别的本事没有，搞这些还是有点经验的！ ```shell raise RuntimeError( RuntimeError: The current installed version of g++ (4.8.5) is less than the minimum required version by CUDA 11.7 (6.0.0). Please make sure to use an adequate version of g++ (>=6.0.0, <12.0). error: subprocess-exited-with-error ``` #### 升级GCC ```shell yum install centos-release-scl sudo yum install devtoolset-8-gcc* scl enable devtoolset-8 bash gcc -v # 注意：以上操作只对本次会话有效，重启会话后还是会变回原来的GCC版本 ``` 参考文档：[简书](https://www.jianshu.com/p/5bbd5219e79d) <ImgView title="GLM-130B" url="https://1.z.wiki/autoupload/20230606/HXSS.1578X1978-image.png" /> 到此，继续安装`apex`未搞定的步骤即可安装成功。 ```shell pip install -v --disable-pip-version-check --no-cache-dir --global-option="--cpp_ext" --global-option="--cuda_ext" ./ ``` ### 下载GLM-130B源码 ```shell git clone https://github.com/THUDM/GLM-130B.git ``` 安装依赖 ```shell cd GLM-130B pip install -r requirements.txt ``` <ImgView title="GLM-130B" url="https://1.z.wiki/autoupload/20230606/G0XY.1396X2072-image.png" /> ps:百兆带宽，下载速度真快！！ <ImgView title="百兆带宽，下载速度真快！！" url="https://z.wiki/autoupload/20230606/09H1.191X174-image.png" /> 如果下载过程慢的话也可以尝试切换到国内其他源 ```shell # 豆瓣源 pip install -r requirements.txt -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com # 阿里云源 pip install -r requirements.txt -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com ``` ### 下载模型 申请下载 `GLM-130B` 的模型`checkpoint`，目前需要申请才能下载，[申请地址](https://models.aminer.cn/glm/zh-CN/download/GLM-130B) <ImgView title="GLM-130B" url="https://5.z.wiki/autoupload/20230606/9DVX.1320X1846-image.png" /> 申请后很快便会收到邮件，按邮件里的流程下载即可 注：模型较大，下载比较费时间。 <ImgView title="GLM-130B" url="https://5.z.wiki/autoupload/20230606/zOg4.1036X2796-image.png" /> ```shell mkdir ~/130b cd ~/130b wget https://z.wiki/autoupload/20230606/Okx1.urls.txt aria2c -x 16 -s 16 -j 4 --continue=true -i Okx1.urls.txt ``` 下载过程中可以通过`ifstat`来查看网络状况 ```shell watch -n 1 -c -d ifstat ``` <ImgView title="GLM-130B" url="https://5.z.wiki/autoupload/20230606/01TY.372X1142-image.png" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 12M 的下载速度，60 个文件总共 260G 大小的资源， 按这速度得下载 6 个小时 😭 <ImgView title="GLM-130B" url="https://5.z.wiki/autoupload/20230606/iJzL.174X174-image.png" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <ImgView title="GLM-130B" url="https://5.z.wiki/autoupload/20230606/dH5T.746X1494-image.png" /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 到下载完、合并成一个文件、解压完，整整 9 个小时，天啦噜 按照官网要求修改配置： 将 `configs/model_glm_130b_v100.sh` 中的 `CHECKPOINT_PATH` 设置为解压文件夹的路径 将 `scripts/generate.sh` 中的 `model_glm_130b.sh` 改成 `model_glm_130b_v100.sh`, #### 开始运行 ```shell bash scripts/generate.sh --input-source interactive ``` 一切顺利哈哈哈 <ImgView title="GLM-130B" url="https://5.z.wiki/autoupload/20230606/yNlv.2340X2054-image.png" /> 然而，现实从来不像童话故事里那么完美，回答一个简单的“你好，你是谁？”居然要 200+ 秒 <ImgView title="GLM-130B" url="https://8.z.wiki/autoupload/20230607/ggTO.1290X2222-image.png" /> <ImgView title="GLM-130B" url="https://8.z.wiki/autoupload/20230607/vQsX.328X500-image.png" /> <ImgView title="GLM-130B" url="https://8.z.wiki/autoupload/20230607/OKAj.498X2206-image.png" /> > 这 AI 是记性不太好？三亚出现了两次。。。 就酱吧，碎啦。。。 <ImgView title="GLM-130B" url="https://8.z.wiki/autoupload/20230607/UL69.174X174-image.png" /> ### 其他报错排查与修复 #### nvidia-smi 报错 执行`nvidia-smi`的时候报错`Failed to initialize NVML: Driver/library version mismatch`， 这是因为系统中安装的`NVIDIA`驱动程序版本与应用程序使用的`NVML`库版本不兼容。 `NVML`是一个允许程序访问`NVIDIA GPU`监视和管理功能的库。 解决方案一： [重新安装 NVIDIA 驱动](https://www.cyberciti.biz/faq/how-to-install-nvidia-driver-on-centos-7-linux/?__cf_chl_rt_tk=XtRGeteJHXCD0wUMOxZbiUq_1UZDoySBDKHgG49qJDk-1686036569-0-gaNycGzNDuU) 解决方案二： [重新安装 NVIDIA 驱动](https://docs.nvidia.com/datacenter/tesla/tesla-installation-notes/index.html#centos7) #### GLIBCXX not found [GLIBCXX not found](https://www.cnblogs.com/juedingsheng/p/15643394.html) #### 内存不足，设置交换区 [设置交换区](https://z.wiki/tech/centos-set-swap.html#centos%E8%AE%BE%E7%BD%AE%E7%BC%93%E5%AD%98%E5%8C%BA) ### 相关项目 * [GLM-130B](https://github.com/THUDM/GLM-130B/) * [chatglm-web](https://github.com/NCZkevin/chatglm-web) * [ChatGLM-6B](https://github.com/THUDM/ChatGLM-6B): "<p>-noverify -Xmax=30g</p> ",

# crontab `centos 8`默认已安装`crontab`，通过`crontab`可以设置周期性调度任务、启动时任务。 `crontab`中的任务分为用户任务，系统级任务。 ## 用户任务 查看用户任务 ```shell crontab -l ``` 编辑用户任务 ```shell crontab -e ``` 清空任务 ```shell crontab -r ``` 注：用户任务配置在目录`/var/spool/cron`下 ## 系统级任务 系统级任务配置在`/etc/crontab`中，可配置定时任务，也可配置系统启动时需要执行的任务 > 某些任务需要`root`账号启动，可配置在系统级任务中 > 如：`nginx`默认占用`80`、`443`等特殊端口，而`centos`中，`1000`以内的端口需要`root`账号才能使用 ```shell SHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root # For details see man 4 crontabs # Example of job definition: # .---------------- minute (0 - 59) # | .------------- hour (0 - 23) # | | .---------- day of month (1 - 31) # | | | .------- month (1 - 12) OR jan,feb,mar,apr ... # | | | | .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat # | | | | | # * * * * * user-name command to be executed @reboot root /home/path/start.sh # 系统启动时执行的任务 ``` ## 查看日志 `crontab` 日志目录为 `/var/log/cron` ## 其他类似方案 ### pm2 `pm2`是基于`nodejs`的进程管理工具，可以配合`shell`执行周期性任务， 也可以用来管理开机自启任务（通过保存进程状态，在开机时恢复进程状态，这一点上比`crontab`好用）。 #### 自动部署服务 编写`shell`脚本，从`github`拉去代码、编译构建、部署到`nginx`中 ```shell cd path-of-project git pull npm i npm run build mv -f dist/* path-of-nginx sleep 60 # 这里 sleep 一分钟是为了避免 pm2 过于频繁的执行该脚本 ``` 通过`pm2`持续性的运行该脚本 ```shell pm2 start shell-path ``` 如果需要开机自动启动该脚本，可以通过`pm2 save`保存进程状态，开机便会自动运行。 > 注：在使用 `pm2 save`之前需要确保`pm2`本身能够开机启动，执行以下命令并根据提示设置自启动`pm2 startup` ### chkconfig 参考文档： [chkconfig](https://www.linuxjournal.com/article/4445)

# crontab > 原文连接：[snippets crontab](https://snippets.z.wiki/#!./snippets/shell/crontab/) `centos 8`默认已安装`crontab`，通过`crontab`可以设置周期性调度任务、启动时任务。 `crontab`中的任务分为用户任务，系统级任务。 ### 用户任务 查看用户任务 ```shell crontab -l ``` 编辑用户任务 ```shell crontab -e ``` 清空任务 ```shell crontab -r ``` 注：用户任务配置在目录`/var/spool/cron`下 ### 系统级任务 系统级任务配置在`/etc/crontab`中，可配置定时任务，也可配置系统启动时需要执行的任务 > 某些任务需要`root`账号启动，可配置在系统级任务中 > 如：`nginx`默认占用`80`、`443`等特殊端口，而`centos`中，`1000`以内的端口需要`root`账号才能使用 ```shell SHELL=/bin/bash PATH=/sbin:/bin:/usr/sbin:/usr/bin MAILTO=root # For details see man 4 crontabs # Example of job definition: # .---------------- minute (0 - 59) # | .------------- hour (0 - 23) # | | .---------- day of month (1 - 31) # | | | .------- month (1 - 12) OR jan,feb,mar,apr ... # | | | | .---- day of week (0 - 6) (Sunday=0 or 7) OR sun,mon,tue,wed,thu,fri,sat # | | | | | # * * * * * user-name command to be executed @reboot root /home/path/start.sh # 系统启动时执行的任务 ``` ### 查看日志 `crontab` 日志目录为 `/var/log/cron` ### 其他类似方案 #### pm2 `pm2`是基于`nodejs`的进程管理工具，可以配合`shell`执行周期性任务， 也可以用来管理开机自启任务（通过保存进程状态，在开机时恢复进程状态，这一点上比`crontab`好用）。 ##### 自动部署服务 编写`shell`脚本，从`github`拉去代码、编译构建、部署到`nginx`中 ```shell cd path-of-project git pull npm i npm run build mv -f dist/* path-of-nginx sleep 60 # 这里 sleep 一分钟是为了避免 pm2 过于频繁的执行该脚本 ``` 通过`pm2`持续性的运行该脚本 ```shell pm2 start shell-path -- -option value # 或不带参数 pm2 start shell-path ``` 如果需要开机自动启动该脚本，可以通过`pm2 save`保存进程状态，开机便会自动运行。 > 注：在使用 `pm2 save`之前需要确保`pm2`本身能够开机启动，执行以下命令并根据提示设置自启动`pm2 startup` ##### 监控 1. 终端监控 ```shell pm2 monit ``` 通过执行`pm2 monit`可直接在终端打开监控。 <ImgView title="pm2 终端监控" url="https://2.z.wiki/autoupload/2022-07-28/e31fbb29ab28463f8417d03e3c2f0b72.image.png" /> 2. 在线地址 ```shell pm2 plus ``` 通过执行`pm2 plus`可开启在线监控，但该服务为收费服务，默认提供`14`天体验时间。 <ImgView title="pm2 在线监控" url="https://2.z.wiki/autoupload/2022-07-28/d4b8b27aba294846b94bf2c8af4b9de4.image.png" /> #### chkconfig 参考文档： [chkconfig](https://www.linuxjournal.com/article/4445) : " <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/angry.png" /> ", : " <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/fan.png" /> <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/fan.png" /> <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/fan.png" /> ", : " <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/fan.png" /> ", : " <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/awkward.png" /> ",

# 容易发音错误的单词 > from [chinese-programmer-wrong-pronunciation](https://github.com/shimohq/chinese-programmer-wrong-pronunciation) 中国程序员容易发音错误的单词(点击▶️收听正确读音) | 单词 | 发音 | 在线发音(英式发音) | |---------------|-------------------------------|-----------------------------------------------------------------------------------------| | access | /'&aelig;kses/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=access&amp;type=1" /> | | Adobe | /ə'dəʊbi/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=Adobe&amp;type=1" /> | | admin | /'&aelig;dmɪn/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=admin&amp;type=1" /> | | adversarial | /ˌ&aelig;dvəˈseəriəl/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=adversarial&amp;type=1" /> | | agile | /'&aelig;dʒaɪl/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=agile&amp;type=1" /> | | amazon | /'&aelig;məzən/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=amazon&amp;type=1" /> | | analogy | /əˈn&aelig;lədʒi/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=analogy&amp;type=1" /> | | Angular | /'&aelig;ŋgjʊlə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=Angular&amp;type=1" /> | | AJAX | /'eidʒ&aelig;ks/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=AJAX&amp;type=1" /> | | alias | /ˈeɪliəs/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=alias&amp;type=1" /> | | Apache | /ə'p&aelig;tʃɪ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=Apache&amp;type=1" /> | | app | /&aelig;p/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=app&amp;type=1" /> | | archive | /'ɑːkaɪv/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=archive&amp;type=1" /> | | array | /ə'rei/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=array&amp;type=1" /> | | ASCII | /'&aelig;ski/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=ascii&amp;type=1" /> | | aspect | /'&aelig;spekt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=aspect&amp;type=1" /> | | async | /əˈsɪŋk/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=async&amp;type=1" /> | | avatar | /'&aelig;vətɑː/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=avatar&amp;type=1" /> | | Azure | /'&aelig;ʒə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=azure&amp;type=1" /> | | bind | /baɪnd/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=bind&amp;type=1" /> | | cache | /k&aelig;ʃ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=cache&amp;type=1" /> | | Chrome | /krəʊm/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=chrome&amp;type=1" /> | | clang | /kl&aelig;ŋ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=clang&amp;type=1" /> | | debt | /det/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=debt&amp;type=1" /> | | deny | /dɪ'naɪ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=deny&amp;type=1" /> | | deprecate | /ˈdeprəkeɪt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=deprecate&amp;type=1" /> | | digest | n. /'dɑɪdʒɛst/ v. /dɑɪ'dʒɛst/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=digest&amp;type=1" /> | | doc | /dɒk/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=doc&amp;type=1" /> | | dotnet | /dɒtnet/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=dotnet&amp;type=1" /> | | ephemeral | /<AudioPlayer link="emərəl/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=ephemeral&amp;type=1" /> | | epoch | /ˈiːpɒk/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=epoch&amp;type=1" /> | | execute | /ˈeksɪkjuːt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=execute&amp;type=1" /> | | facade | /fə'sɑːd/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=facade&amp;type=1" /> | | fedora | /fɪ'dɔːrə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=fedora&amp;type=1" /> | | format | /'fɔːm&aelig;t/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=format&amp;type=1" /> | | gauge | /ɡeɪdʒ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=gauge&amp;type=1" /> | | Git | /ɡɪt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=git&amp;type=1" /> | | GUI | /ˈɡu:i/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=%7BGUI%7D&amp;type=1" /> | | height | /haɪt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=height&amp;type=1" /> | | hidden | /'hɪdn/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=hidden&amp;type=1" /> | | image | /'ɪmɪdʒ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=image&amp;type=1" /> | | implement | /'ɪmplɪm(ə)nt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=implement&amp;type=1" /> | | integer | /'ɪntɪdʒə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=integer&amp;type=1" /> | | issue | /'ɪʃuː/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=issue&amp;type=1" /> | | Java | /'dʒɑːvə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=java&amp;type=1" /> | | key | /kiː/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=key&amp;type=1" /> | | Ldap | /el'd&aelig;p/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=ldap&amp;type=1" /> | | linear | /'lɪnɪə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=linear&amp;type=1" /> | | LINQ | /lɪŋk/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=link&amp;type=1" /> | | Linux | /'lɪnəks/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=linux&amp;type=1" /> | | locale | /ləʊ'kɑːl/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=locale&amp;type=1" /> | | Lucene | /lu'siːn/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=lucene&amp;type=1" /> | | main | /meɪn/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=main&amp;type=1" /> | | margin | /'mɑːdʒɪn/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=margin&amp;type=1" /> | | matrix | /ˈmeɪtrɪks/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=matrix&amp;type=1" /> | | maven | /'meɪvn/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=maven&amp;type=1" /> | | Microsoft | /'maikrəusɔft/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=Microsoft&amp;type=1" /> | | miscellaneous | /ˌmɪsəˈleɪniəs/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=miscellaneous&amp;type=1" /> | | obsolete | /ˈɒbsəliːt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=obsolete&amp;type=1" /> | | parameter | /pə'r&aelig;mɪtə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=parameter&amp;type=1" /> | | privilege | /'prɪvəlɪdʒ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=privilege&amp;type=1" /> | | Prometheus | /prə-ˈmē-thē-əs/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=prometheus&amp;type=1" /> | | Qt | /kjuːt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=cute&amp;type=1" /> | | Realm | /relm/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=realm&amp;type=1" /> | | reconcile | /ˈrekənsaɪl/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=reconcile&amp;type=1" /> | | resume | /rɪ'zju:m/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=resume&amp;type=1" /> | | resolved | /rɪ'zɒlvd/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=resolved&amp;type=1" /> | | resort | /rɪˈzɔ:t/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=resort&amp;type=1" /> | | retina | /'retɪnə/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=retina&amp;type=1" /> | | route | /ruːt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=route&amp;type=1" /> | | safari | /sə'fɑːrɪ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=safari&amp;type=1" /> | | scheme | /skiːm/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=scheme&amp;type=1" /> | | scala | /ˈskɑːlɑ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=scala&amp;type=1" /> | | segue | /'sɛɡwe/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=segue&amp;type=1" /> | | thymeleaf | /ˈtaɪmˌlɪːf/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=thymeleaf&amp;type=1" /> | | tuple | /tjʊpəl/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=tuple&amp;type=1" /> | | Vagrant | /ˈveɪɡrənt/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=Vagrant&amp;type=1" /> | | verbose | /vɜːˈbəʊs/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=verbose&amp;type=1" /> | | vue | /v'ju:/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=vue&amp;type=1" /> | | width | /wɪdθ/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=width&amp;type=1" /> | | YouTube | /'juː'tjuːb/ | <AudioPlayer link="https://dict.youdao.com/dictvoice?audio=youtube&amp;type=1" /> |: " <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/haha.png" /> <img src="https://z.wiki/autoupload/20240216/etef.emoji.zip/emoji/haha.png" /> ", : "👍",

# 微前端在美团外卖的实践 原链接：https://tech.meituan.com/2020/02/27/meituan-waimai-micro-frontends-practice.html ### 背景 微前端是一种利用微件拆分来达到工程拆分治理的方案，可以解决工程膨胀、开发维护困难等问题。随着前端业务场景越来越复杂，微前端这个概念最近被提起得越来越多，业界也有很多团队开始探索实践并在业务中进行了落地。可以看到，很多团队也遇到了各种各样的问题，但各自也都有着不同的处理方案。诚然，任何技术的实现都要依托业务场景才会变得有意义，所以在阐述美团外卖广告团队的微前端实践之前，我们先来简单介绍一下外卖商家广告端的业务形态。目前，我们开发和维护的系统主要包括三端：  - PC系统：单门店投放系统PC端 - H5系统：单门店投放系统H5端 - KA系统：多门店投放系统PC端 如上图所示，原始解决方案的三端由各自独立开发和维护，各自包含所有的业务线，而我们的业务开发情况是： - PC端和H5端相同业务线的**基本业务逻辑一致**，UI差异大。 - PC端和KA端相同业务线的**部分业务逻辑一致**，UI差异小。 在这种特殊的业务场景下，就会出现一个有关开发效率的抉择问题。即我们希望能复用的部分只开发一次，而不是三次。那么接下来，就有两个问题摆在我们面前： - 如何进行**物理层面的复用**（不同端的代码在不同地址的Git仓库）。 - 如何进行**逻辑层面的复用**（不同端的相同逻辑如何使用一份代码进行抽象）。 我们这里重点看一下物理层面的复用，即：如何在物理空间上使得各自独立的三端系统（不同仓库）引入我们的复用层？我们尝试了NPM包、Git subtree等类“共享文件”的方式后发现，最有效率的复用方式是把三个系统放在一个仓库里，去消除物理空间上的隔离，而不是去连接不同的物理空间。当然，我们三端系统的技术栈是一致的，所以就进行了如下图的改造：  可以看到，当我们把三端系统放在一个仓库中时，通过common文件夹提供了物理层面可复用的土壤，不再需要“共享文件”式地进行频繁地拉取操作，直接引用复用即可。不过，在带来物理层面复用效率提升的同时，也加速了整个工程出现了爆炸式发展的问题，随着产品线从最初的几个发展到现在的几十个之多，工程管理成本也在迅速增长。具体来说，包括如下四个方面： - 新业务线产品急速增加，同时为了保证三端系统复用效率的最大化，把文件放入同一仓库管理，导致文件数量增长极快，管理及协同开发难度也在不断加大。 - 文件越来越多，文件结构越不受控制，业务开发寻址变得越来越困难。 - 文件越来越多，开发、构建、部署速度变得越来越慢，开发体验在持续下降。 - 不同业务线间没有物理隔离，出现了跨业务线互相引用混乱，例如A业务线出现了B业务线名字的组件。 如下图所示，具体地说明了原有架构存在的问题。为了要解决这些问题，我们意识到需要拆分这些应用，即进行工程优化的常规手段进行“分治”。那么要怎么拆呢？自然而然地我们就想到了微前端的概念。也从这个概念出发，我们参考业界优秀方案，同时也深度结合了广告端实际业务的开发情况，对现有工程进行了微前端的实践与落地。  #### 需求分析 结合现有工程的状况，我们进行了深度的分析。不过，在进行微前端方案确定前，我们先确定了需求点及期望收益，如下表所示： | **需求点** | **收益与要求** | | --- | --- | | **拆分解耦** | （1）按业务领域拆分成不同的仓库进行维护，不同业务线的开发者更加独立，不同业务线之间互不影响。（2）物理层面拆分，加速寻址，新增功能修改Bug更加迅速。（3）逻辑层面拆分，杜绝引用混乱，不会出现A业务线引用B业务线组件的情况。 | | **加速体验** | （1）开发环境急速启动，提高开发体验。（2）业务线按需打包，急速部署上线。 | | **侵入性低** | 微前端方案改动原有代码的侵入性降到最小，无需大规模改造，减少甚至消除回归测试的成本。 | | **学习成本低** | 开发人员无需感知拆分的存在，保持单页应用的开发体验，不需要学习额外的规则。 | | **统一技术栈** | 为了统一共建与技术沉淀，团队内工程已经统一到了React技术栈，禁止使用不同的技术栈进行开发。 | #### 方案选择 经过以上的需求分析，我们调研了业界及公司周边的微前端方案，并总结了以下几种方案以及它们各自主要的特点： - **NPM式**：子工程以NPM包的形式发布源码；打包构建发布还是由基座工程管理，打包时集成。 - **iframe式**：子工程可以使用不同技术栈；子工程之间完全独立，无任何依赖；基座工程和子工程需要建立通信机制；无单页应用体验；路由地址管理困难。 - **通用中心路由基座式**：子工程可以使用不同技术栈；子工程之间完全独立，无任何依赖；统一由基座工程进行管理，按照DOM节点的注册、挂载、卸载来完成。 - **特定中心路由基座式**：子业务线之间使用相同技术栈；基座工程和子工程可以单独开发单独部署；子工程有能力复用基座工程的公共基建。 通过对各个方案特点进行分析，我们将重点关注项进行了对比，如下表所示： | **方案** | **技术栈是否能统一** | **单独打包** | **单独部署** | **打包部署速度** | **单页应用体验** | **子工程切换速度** | **工程间通信难度** | **现有工程侵入性** | **学习成本** | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | **NPM式** | 是（不强制） | 否 | 否 | 慢 | 是 | 快 | 正常 | 高 | 高 | | **iframe式** | 是（不强制） | 是 | 是 | 正常 | 否 | 慢 | 高 | 高 | 低 | | **通用中心路由基座式** | 是（不强制） | 是 | 是 | 正常 | 是 | 慢 | 高 | 高 | 高 | | **特定中心路由基座式** | 是（强制） | 是 | 是 | 快 | 是 | 快 | 正常 | 低 | 低 | 经过上面的调研对比之后，我们确定采用了特定中心路由基座式的开发方案，并命名为：**基于React的中心路由基座式微前端**。这种方案的优点包括以下几个方面： - 保证技术栈统一在React。 - 子工程之间开发互相独立，互不影响。 - 子工程可单独打包、单独部署上线。 - 子工程有能力复用基座工程的公共基建。 - 保持单页应用的体验，子工程之间切换不刷新。 - 改造成本低，对现有工程侵入度较低，业务线迁移成本也较低。 - 开发子工程和原有开发模式基本没有不同，开发人员学习成本较低。 ### 微前端实践概览 通过对方案的分析及技术方向上的梳理，我们确定了微前端的整体方案，如下图所示：  可以看到，整个方案非常简单明确，即按照业务线进行了**路由级别的拆分**。整个系统可分为两个部分： - 基座工程：用于管理子工程的路由切换、注册子工程的路由和全局Store层、提供全局库和复用层。 - 子工程：用于开发子业务线业务代码，一个子工程对应一个子业务线，并且包含三端代码和复用层代码。 基座工程和子工程联系起来的桥梁则是**子工程的入口文件地址和路由地址的映射信息**。这些映射信息可以让基座工程准确地发现子工程资源的路径从而进行加载。 #### 微前端架构下的业务变化 经过微前端实践的改造，我们的业务在结构上发生了如下的变化：  如上图所示，我们进行了微前端式的业务线拆分： - 原有的PC系统、H5系统、KA系统分别改造成了PC基座系统、H5基座系统和KA基座系统。 - 原有的子业务线被拆分成了单独的子仓库，成为了业务线子工程（上图中6个黑框竖列）。 - 业务线子工程分别包含PC端、H5端、KA端以及该业务线复用层的代码（上图中3个纯色背景横列）。 新的拆分使得子工程能够按照业务线进行划分，独立维护。在解决复用层的同时保证了子工程大小可控，即子工程只有单个业务线的代码。而单个业务线的复杂度并不高，也降低了工程维护的复杂度。 采用微前端拆分的方案，使得我们的业务不仅**在纵向上保有了复用的能力**，更重要的是**拥有了横向扩展的能力**，无论产品业务线如何膨胀，我们都可以更轻松地应对。那么为了实现以上的能力，我们做了哪些工作呢？下文我们会详细进行说明。 ### 基于React技术栈的中心路由基座式微前端 微前端拆分的方案，我们命名为：基于React技术栈的中心路由基座式微前端。在具体实现上，我们会分为动态化方案、路由配置信息设计、子工程接口设计、复用方案设计和流程方案设计等几个模块来逐一进行说明。 #### 动态化方案 首先，我们需要**路由的管理方案**，使得子工程之间有能力互通切换。其次，我们需要**Store层的方案**，让子工程有能力使用全局Store。并且，我们还需要**CSS的加载方案**，来加载子工程的样式布局。下面来详细说明这三个方案。 **动态路由** 动态路由方案是想要进行路由级别的拆分，首先我们要确定用什么来管理路由？很多实现方案倾向于使用特制路由来管理模块。例如开源框架Single-Spa，实现了自己的一套路由监听来切换子工程，并且需要子工程实现特定的注册、挂载、卸载等接口来完成子工程和基座工程的动态对接，还需要特定的模块管理系统，例如systemjs来辅助完成这一过程。毋庸置疑，这对我们原有工程的改造成本很大，还需要添加额外库，进而造成包体积大小上的开销。并且子工程的开发者需要熟悉这些特定的接口，学习成本也比较高。显然，这对于我们的业务场景和需求来说很不划算。 那么，我们选择什么来做路由管理呢？最终我们使用了React-Router，这样能够保持我们原来的技术栈不变，同时对于工程的侵入也是最低，几乎可以忽略不计。此外，React-Router能完全可以满足我们的需求，而且自动会帮助我们管理页面的加载与卸载，而不是每次切换路由都重新初始化整个子应用，所以在加载速度体验上也是最优的，跟单页应用体验一致。 实现上也很简单，如下图：  上面这个流程图，展示了我们在基座工程中切换到子工程路由时，加载子工程并进行展示的过程。这里的重点步骤是加载子工程入口文件，并动态注册子工程路由的过程。由于我们使用的是React-Router，显然要使用其提供的动态能力来完成。这一过程也非常轻量，由于React-Router从版本4开始有了“破坏级”的升级，于是我们就调研了两种方式进行动态加载路由（目前我们使用的是React-Router版本5），如下表所示： | **React-Router 版本** | **动态加载方式** | | --- | --- | | 3 | 利用Route的getChildRoutes的API异步加载路由。 | | 4及以上 | 版本4及以上，React-Router在实现思路上有了非常大的变动，即不再以提前注册路由的集中式路由为设计理念，转变成路由即组件的思路。对于动态加载路由来说，就是动态加载组件，使得我们的动态加载更加容易实现，无须依赖任何API，只需写一个异步组件即可。 | React-Router版本3中，实现的基本代码思路如下： _// react-router V3 用于接收子工程的路由_ **export** **default** () => ( <**Route** path="/subapp" getChildRoutes={(location: any, cb: any) => { const { pathname } = location.location; // 取路径中标识子工程前缀的部分, 例如 '/subapp/xxx/index' 其中xxx即路由唯一前缀 const id = pathname.split('/')[2]; const subappModule = (subAppMapInfo as any)[id]; if (subappModule) { if (subappRoutes[id]) { // 如果已经加载过该子工程的模块，则不再加载，直接取缓存的routes cb(null, [subappRoutes[id]]); return; } // 如果能匹配上前缀则加载相应子工程模块 currentPrefix = id; loadAsyncSubapp(subappModule.js) .then(() => { // 加载子工程完成 cb(null, [subappRoutes[id]]); }) .catch(() => { // 如果加载失败 console.log('loading failed'); }); } else { // 可以重定向到首页去 goBackToIndex(); } }} /> ); 而在React-Router版本4中，实现的基本代码思路如下： **export** **const** AyncComponent: React.FC<{ hotReload?: number; } & RouteComponentProps> = ({ location, hotReload }) => { _// 子工程资源是否加载完成_ **const** [ayncLoaded, setAyncLoaded] = useState(false); _// 子工程url配置信息是否加载完成_ **const** [subAppMapInfoLoaded, setSubAppMapInfoLoaded] = useState(false); **const** [ayncComponent, setAyncComponent] = useState(null); **const** { pathname } = location; _// 取路径中标识子工程前缀的部分, 例如 '/subapp/xxx/index' 其中xxx即路由唯一前缀_ **const** id = pathname.split('/')[2]; useEffect(() => { _// 如果没有子工程配置信息, 则请求_ **if** (!subAppMapInfoLoaded) { fetchSubappUrlPath(id).then((data) => { subAppMapInfo = data; setSubAppMapInfoLoaded(true); }).catch((url: any) => { _// 失败处理_ goBackToIndex(); }); **return**; } **const** subappModule = (subAppMapInfo **as** any)[id]; **if** (subappModule) { **if** (subappRoutes[id]) { _// 如果已经加载过该子工程的模块，则不再加载，直接取缓存的routes_ setAyncLoaded(true); setAyncComponent(subappRoutes[id]); **return**; } _// 如果能匹配上前缀则加载相应子工程模块_ _// 如果请求成功，则触发JSONP钩子window.wmadSubapp_ currentPrefix = id; setAyncLoaded(false); **const** jsUrl = subappModule.js; loadAsyncSubapp(jsUrl) .then(() => { _// 加载子工程完成_ setAyncComponent(subappRoutes[id]); setAyncLoaded(true); }) .catch((urlList) => { _// 如果加载失败_ setAyncLoaded(false); console.log('loading failed...'); }); } **else** { _// 可以重定向到首页去_ goBackToIndex(); } }, [id, subAppMapInfoLoaded, hotReload]); **return** ayncLoaded ? ayncComponent : null; }; 可以看到，这种方式实现起来非常简单，不需要额外依赖，同时满足了我们“拆分”的诉求。 **动态Store** 对于Store层，我们原工程使用的是Redux，子工程通过路由动态注册进来天然就可以访问到全局Store，所以对于Store的访问能够自动支持。那么，如果子工程想要注册自己的全局Store该怎么办呢？而且我们还用了redux-saga来作为异步处理方案。redux-saga如何动态注册呢？还是利用它们各自的API就可以达到我们的目的？从下图中可以看到，支持动态Store也是花费很小的改造成本就可以完成。  **动态CSS** 同样的对应子工程的样式布局，我们也需要通过某种途径加载到基座工程中来。这个很自然地用异步加载CSS文件通过style标签注入来完成，不过这里需要注意两个问题： 一个问题是，加载子工程的JS入口文件和CSS文件可以同时发起请求，但是需要保证CSS文件加载完成后再进行JS入口文件的路由注册。因为如果路由先注册了页面就会显示出来，如果这时CSS文件还没有加载完毕，就会出现页面样式闪动的问题。我们通过先加载CSS再加载JS的策略来避免这个问题的发生。 另一个问题是，怎么保证子工程的CSS不会和其他子工程冲突。我们利用PostCSS插件在编译子工程时，按照分配给子工程的唯一业务线标识，为每一组CSS规则生成了命名空间来解决这个问题。而子业务线开发者是没有感知的，可以没有“心智负担”地书写子工程的样式。 #### 路由配置信息方案 在动态加载方案确定之后，基座工程怎么才能知道子工程的资源路径，进而加载对应的JS和CSS资源呢？我们需要一组映射信息。如下图所示，业务线唯一标识为Key，相应的静态资源地址为Value。这样的话，当基座工程切换到子工程时就可以拉取这个配置信息，在路由切换时准确地找到对应的子工程，进而进行后续的资源加载过程。这里可能会遇到的一个问题，即如果JS和CSS过大，是否能进行拆分？  根据我们业务的实际情况，目前静态资源的大小是可控的，无需注册多个，单一入口地址完全能够满足我们的业务需求，并且由于我们的改造完全基于现有技术栈。如果业务很复杂，完全可以在子工程中通过webpack的动态import进行路由懒加载，也就是说，子工程完全可以按照路由再次切分成chunks来减少JS的包体积。至于CSS本身就很小，长期也不会有进行切分的需要。 #### 子工程接口方案 子工程需要暴露它要注册给基座工程的对象，来进行基座工程加载子工程的过程。在子工程入口文件中定义registerApp来传递注册的对象，主要代码如下： ```vue import reducers from 'common/store/labor/reducer'; import sagas from 'common/store/labor/saga'; import routes from './routes/index'; function registerApp(dep: any = {}): any { return { routes, // 子工程路由组件 reducers, // 子工程Redux的reducer sagas, // 子工程的Redux副作用处理saga }; } export default registerApp ``` 我们这里暴露了子工程的三个对象：这里最重要的就是routes路由组件，就是在写React-Router（版本4及以上）的路由。子工程开发者只需要配置routes对象即可，没有任何学习成本，其代码如下： ```vue /** * 子工程路由注册说明 * 如注册的路由如下： * path: 'index' * 路由前缀会被追加上，路由前缀规则见变量urlPrefix * 在主工程的访问路劲为：/subapp/${工程注册名称}/index */ const urlPrefix = `/subapp/${microConfig.name}/`; const routes = [ { path: 'index', component: IndexPage, }, ]; const AppRoutes = () => ( <Switch> { routes.map(item => ( <Route key={item.path} exact path={`${urlPrefix}${item.path}`} component={item.component} /> )) } <Redirect to="/" /> </Switch> ); export default AppRoutes; ``` 除了上方的routes对象，还剩下两个接口对象是：reducers和sagas，用于动态注册全局Store相关的数据和副作用处理。这两个接口我们在子工程中暂时没有开放，因为按照业务线拆分过后，由于业务线间独立性很强，全局Store的意义就不大了。我们希望子工程可以自行处理自己的Store，即每个业务线维护自己的Store，这里就不再展开进行说明了。 #### 复用方案 基座工程除了路由管理之外，还作为共享层共享全局的基建，例如框架基本库、业务组件等。这样做的目的是，子业务线间如果有相同的依赖，切换的时候就不会出现重复加载的问题。例如下面的代码，我们把React相关库都以全局的方式导出，而子工程加载的时候就会以external的形式加载这些库，这样子工程的开发者不需要额外的第三方模块加载器，直接引用即可，和平时开发React应用一致，没有任何学习成本。而和各个业务都相关的公用组件等，我们会放到wmadMicro的全局命名空间下进行管理。主要代码如下： ```vue import * as React from 'react'; import * as ReactDOM from 'react-dom'; import * as ReactRouterDOM from 'react-router-dom'; import * as Axios from 'axios'; import * as History from 'history'; import * as ReactRedux from 'react-redux'; import * as Immutable from 'immutable'; import * as ReduxSagaEffects from 'redux-saga/effects'; import Echarts from 'echarts'; import ReactSlick from 'react-slick'; ​ function registerGlobal(root: any, deps: any) { Object.keys(deps).forEach((key) => { root[key] = deps[key]; }); } registerGlobal(window, { // 在这里注册暴露给子工程的全局变量 React, ReactDOM, ReactRouterDOM, Axios, History, ReactRedux, Immutable, ReduxSagaEffects, Echarts, ReactSlick, }); export default registerGlobal; ``` #### 流程方案 在确定了程序拆分运行的整体衔接之后，我们还要确定开发方案、部署方案以及回滚方案。我们如何开始开发一个子工程？以及我们如何部署我们的子工程？ **开发流程** 有两种开发方案可以满足独立开发的目的：第一种是提供一个基座工程的Dev环境，子工程在本地启动后在Dev环境进行开发，这种开发方式要求有一套基座工程的更新机制，例如基座工程更新后要同步部署到Dev环境。第二种是子工程开发者拉取基座工程到本地并启动本地开发环境，然后拉取子工程到本地，再启动子工程本地开发环境进行开发，这种开发方式是目前我们使用的方式。如下图所示，我们提供了子工程脚手架来快速创建子工程，开发者无需做任何配置和额外学习成本，就可以像开发React应用一样进行开发。  **热更新** 在开发过程中，我们希望我们的开发体验和开发单页应用的体验一致，也要支持热更新。由于我们的拆分，实际上有两个服务，即基座和子工程，所以我们以上图的方式完成了热更新的支持：在子工程的module.hot中通过再次触发基座工程中的JSONP钩子来通知基座工程，来再次触发renderApp达到子工程更新代码则页面热刷新的目的。主要代码如下： _// 在子工程入口文件_ **import** routes **from** './routes/index'; **function** **registerApp**(dep: any = {}): **any** { **return** { routes, }; } **if** ((module **as** any).hot) { (module **as** any).hot.accept('./routes/index', (): any => { window.wmadSubapp(registerApp, true); _// 支持子工程热加载的信息传递_ }); } **export** **default** registerApp **Mock数据** 子工程目前Mock数据的方式有三种：一是在基座本地Mock，这种Mock方式天然支持，因为基座工程基于外卖工程化Nine脚手架进行开发，本身支持本地Mock。二是支持子工程本地Mock。三是使用公共Mock服务YAPI。目前子工程开发的Mock功能结合第一种方式和第三种方式进行。 #### 部署方案 最后是部署方案，我们达成了独立部署上线的目的，即子工程发布不需要基座工程的参与。之前所有子业务线都在一个工程中，打包速度随着业务线的膨胀越来越慢，而如下的方案使得子工程的开发和部署完全独立，单个业务线的打包速度会非常快，从之前的分钟级别降到了秒级别。如下图所示，可以看到，子工程部署只需要把子工程打包，并在上传CDN之后，把配置信息更新即可，因为配置信息中有子工程新的资源地址，这样就达到了发布上线的目的。  整个部署过程我们是托管到Talos（美团内部自研的部署工具）上的，配置信息我们是托管到Portm（美团内部自研的文件存储）上的（通过我们开发的Talos的插件UpdatePubInfo-To-Portm来更新我们的配置信息）。在静态资源上传到CDN之后，就可以更新配置信息，供主工程调用，也就完成了子工程上线的过程。利用美团现有服务，我们很迅速地完成了子工程单独部署上线的整个流程。  #### 回滚方案 在部署方案中，我们通过Talos进行部署，它本身就带有回滚功能。得益于子工程的发布和普通工程的发布并没什么本质不同，都是将静态资源放置到CDN上，通过静态资源的的contenthash值来区分不同版本，所以回滚的时候，Talos取到上个版本（或者某个前版本）的静态资源，再通过Portm更新我们的配置信息即可完成。整个过程和普通工程没有区别，发版人员只需简单地点下回滚按钮即可。  #### 监控方案 改变了原有的开发模式后，我们还对几个关键节点进行了监控报警的埋点。利用美团CAT（已经在GitHub上开源）和天网（美团内部的监控系统），我们分别在子工程的配置信息、静态资源加载等节点上进行了埋点上报，统计子工程加载成功率，及时发现可能出现的子工程切换问题。具体情况如下图所示：  上方左图是按照端维度进行统计的示例，上方右图是PC端按照产品线统计加载成功数的示例。默认都是统计当天的数据，显示‘-’的表明当前没有数据。对资源加载的监控目前有三种类型：JSON、JS和CSS，资源加载失败的统计也包含这三种类型。天网的监控按照分钟级进行，每分钟内如果有加载失败就会发出报警，偶尔的报警可能是用户网络的问题，如果出现大批量的报警就要引起重视了。 ### 总结 以上就是微前端在外卖商家广告端的实践过程。总的来说，我们完成了以下的目标： - 按照领域（业务线）拆分工程，工程的可维护性得到提高，相关领域进行了内聚，无关领域进行了解耦。 - 子工程提供了PC、H5、KA三端的物理复用土壤，消除了工程膨胀问题，工程大小也变得可控。 - 子工程打包速度从分钟级降为秒级，提高了开发体验，加快了上线的速度。 - 子工程开发支持热更新，开发体验不降级。 - 子工程能够单独开发、单独部署、单独上线，业务线间互不影响。 - 整体工程改造成本低，插拔式开发，无侵入式代码，在正常业务开发的同时短期内就可以完成上线。 - 开发者学习成本低，完整地保留了单页应用开发的开发体验，开发者可快速上手。 - 目前在美团广告端，以微前端模式上线的子业务线已经有很多个。另外还有多个正在开发的微前端子工程，剩余在主工程中的子业务线后续也可以无痛迁移出来成为子工程。我们内部也在此过程中搜集了不少意见反馈，未来继续在实践中进行思考和完善。在此过程中，我们深知还有很多做得不够完善甚至存在问题的地方，欢迎大家跟我们进行交流，帮我们提出宝贵意见或者给予指导。当然也欢迎大家加入我们团队，一起共建。 ### 作者简介 张啸、魏潇、天尧，均为美团外卖前端团队研发工程师。 ### 招聘信息 美团外卖广告前端团队诚招高级前端开发、前端开发专家。我们为商家提供变现服务平台，为用户提供优质广告体验，是外卖商业变现中的重要环节。欢迎各位小伙伴的加入，共同打造极致广告产品。感兴趣的同学可投递简历至：tech@meituan.com（邮件标题注明：美团外卖广告前端团队）: "<p>招前段？</p> ", : "<p>博主可以多分享一些文章吗</p> ", : "<p>哦哦</p> ",

# 程序员的工具箱 地址：[程序员的开发工具箱](https://fukit.cn/) <style> .grid-cols-1 > a { text-decoration: none; color: rgb(44, 62, 80); display: inline-block; } .grid-cols-1 > a:hover { text-decoration: none !important; } .c-card { width: 315px; background-color: #ffffff; border: 1px solid #efeff5; border-radius: 4px; padding: 20px 24px; border-color: rgb(30 165 76 / 1 !important) !important; transition-duration: .5s; margin-bottom: 5px; } .c-card:hover { border-color: rgb(30, 165, 76); } .c-card .truncat { color: black; font-size: 16px; margin-left: 25px; } .c-card .line-clamp-2 { color: #737373; font-size: 13px; height: 39px; overflow: hidden; } .c-card > div:first-child { display: flex; position: absolute; } .c-card > div:first-child > i { line-height: 20px; font-size: 20px !important; } .c-card > div:first-child > div { display: none; } .text-neutral-400 svg { width: 20px; height: 20px; } </style> <div data-v-856c1567="" class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4"> <a data-v-856c1567="" href="http://fukit.cn/token-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 4l3 3l-3 3"></path> <path d="M18 20l3-3l-3-3"></path> <path d="M3 7h3a5 5 0 0 1 5 5a5 5 0 0 0 5 5h5"></path> <path d="M21 7h-5a4.978 4.978 0 0 0-2.998.998M9 16.001A4.984 4.984 0 0 1 6 17H3"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Token 生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用您想要的字符、大写或小写字母、数字和/或符号生成随机字符串。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/hash-text" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 3l18 18"></path> <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path> <path d="M9.363 5.365A9.466 9.466 0 0 1 12 5c4 0 7.333 2.333 10 7c-.778 1.361-1.612 2.524-2.503 3.488m-2.14 1.861C15.726 18.449 13.942 19 12 19c-4 0-7.333-2.333-10-7c1.369-2.395 2.913-4.175 4.632-5.341"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Hash 文本</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用所需的函数哈希文本字符串：MD5、SHA1、SHA256、SHA224、SHA512、SHA384、SHA3或RIPEMD160</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/bcrypt" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="8" y="11" width="8" height="5" rx="1"></rect> <path d="M10 11V9a2 2 0 1 1 4 0v2"></path> <rect x="4" y="4" width="16" height="16" rx="2"></rect> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">加密</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用bcrypt对文本字符串进行哈希和比较。Bcrypt是一个基于Blowfish密码的密码哈希函数。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/uuid-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3"></path> <path d="M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6"></path> <path d="M12 11v2a14 14 0 0 0 2.5 8"></path> <path d="M8 15a18 18 0 0 0 1.8 6"></path> <path d="M4.9 19a22 22 0 0 1-.9-7v-1a8 8 0 0 1 12-6.95"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">UUIDs 生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">通用唯一标识符（UUID）是一个128位数字，用于标识计算机系统中的信息。可能的UUID数量为16^32，即2^128或约3.4x10^38（这是一个很大的数字！）。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/ulid-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 15l3 3l3-3"></path> <path d="M7 6v12"></path> <path d="M17 14a2 2 0 0 1 2 2v3a2 2 0 1 1-4 0v-3a2 2 0 0 1 2-2z"></path> <circle cx="17" cy="5" r="2"></circle> <path d="M19 5v3a2 2 0 0 1-2 2h-1.5"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">ULID 生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">生成随机的通用唯一词典可排序标识符（ULID）。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/encryption" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="5" y="11" width="14" height="10" rx="2"></rect> <circle cx="12" cy="16" r="1"></circle> <path d="M8 11V7a4 4 0 0 1 8 0v4"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">加密/解密文本</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/bip39-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 6h16"></path> <path d="M4 12h16"></path> <path d="M4 18h12"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">BIP39密码生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">从现有或随机助记符生成BIP39密码短语，或从密码短语获取助记符。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/hmac-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M5 9h14c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1zm0 4h8c.55 0 1 .45 1 1s-.45 1-1 1H5c-.55 0-1-.45-1-1s.45-1 1-1z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Hmac 生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用密钥和您喜欢的哈希函数计算基于哈希的消息身份验证代码（HMAC）。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/rsa-key-pair-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="15" cy="15" r="3"></circle> <path d="M13 17.5V22l2-1.5l2 1.5v-4.5"></path> <path d="M10 19H5a2 2 0 0 1-2-2V7c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-1 1.73"></path> <path d="M6 9h12"></path> <path d="M6 12h3"></path> <path d="M6 15h2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">RSA密钥对生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">生成新的随机RSA私钥和公钥pem证书。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/password-strength-analyser" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="M17 7h5v10h-5v2a1 1 0 0 0 1 1h2v2h-2.5c-.55 0-1.5-.45-1.5-1c0 .55-.95 1-1.5 1H12v-2h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1h-2V2h2.5c.55 0 1.5.45 1.5 1c0-.55.95-1 1.5-1H20v2h-2a1 1 0 0 0-1 1zM2 7h11v2H4v6h9v2H2zm18 8V9h-3v6zM8.5 12A1.5 1.5 0 0 0 7 10.5A1.5 1.5 0 0 0 5.5 12A1.5 1.5 0 0 0 7 13.5A1.5 1.5 0 0 0 8.5 12m4.5-1.11c-.61-.56-1.56-.51-2.12.11c-.56.6-.51 1.55.12 2.11c.55.52 1.43.52 2 0z"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">密码强度分析仪</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用此密码强度分析器和破解时间估计工具来发现密码的强度。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/pdf-signature-checker" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="M14 13v-2l-2 1l-2-1v2l-2 1l2 1v2l2-1l2 1v-2l2-1M14 2H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h1v-2H7V4h6v4h4v10h-1v2h1a2 2 0 0 0 2-2V7m-5 6v-2l-2 1l-2-1v2l-2 1l2 1v2l2-1l2 1v-2l2-1m-6 9l2-1l2 1v-5h-4m4-5v-2l-2 1l-2-1v2l-2 1l2 1v2l2-1l2 1v-2l2-1Z"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">PDF签名检查器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">验证PDF文件的签名。签名的PDF文件包含一个或多个签名，可用于确定文件的内容在签名后是否已被更改。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/date-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="4" y="5" width="16" height="16" rx="2"></rect> <path d="M16 3v4"></path> <path d="M8 3v4"></path> <path d="M4 11h16"></path> <path d="M11 15h1"></path> <path d="M12 15v3"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">日期时间转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将日期和时间转换为各种不同的格式</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/base-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 17H3"></path> <path d="M6 10L3 7l3-3"></path> <path d="M3 7h18"></path> <path d="M18 20l3-3l-3-3"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">整数基转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">在不同的基数（十进制、十六进制、二进制、八进制、base64…）之间转换数字</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/roman-numeral-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 4l10 16"></path> <path d="M17 4L7 20"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">罗马数字转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将罗马数字转换为数字，并将数字转换为罗马数字。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/base64-string-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <rect x="9" y="12" width="3" height="5" rx="1"></rect> <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"></path> <path d="M15 12v5"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Base64 字符串编码/解码</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将字符串编码和解码为其 Base64 格式表示形式即可。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/base64-file-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <rect x="9" y="12" width="3" height="5" rx="1"></rect> <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"></path> <path d="M15 12v5"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Base64 文件转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将字符串、文件或图像转换为其 Base64 表示形式。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/color-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 21a9 9 0 1 1 0-18a9 8 0 0 1 9 8a4.5 4 0 0 1-4.5 4H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21"></path> <circle cx="7.5" cy="10.5" r=".5" fill="currentColor"></circle> <circle cx="12" cy="7.5" r=".5" fill="currentColor"></circle> <circle cx="16.5" cy="10.5" r=".5" fill="currentColor"></circle> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Color 选择器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">在不同格式（十六进制、rgb、hsl和css名称）之间转换颜色</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/case-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="6.5" cy="15.5" r="3.5"></circle> <path d="M14 19V8.5a3.5 3.5 0 0 1 7 0V19"></path> <path d="M14 13h7"></path> <path d="M10 12v7"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">大小写转换</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">更改字符串的大小写并在不同格式之间进行选择</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/text-to-nato-alphabet" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8a3 3 0 0 1 0 6"></path> <path d="M10 8v11a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-5"></path> <path d="M12 8h0l4.524-3.77A.9.9 0 0 1 18 4.922v12.156a.9.9 0 0 1-1.476.692L12 14H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h8"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">文本转北约字母表</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将文本转换为北约拼音字母以进行口头传播。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/text-to-binary" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M11 10V5h-1m8 14v-5h-1"></path> <rect x="15" y="5" width="3" height="5" rx=".5"></rect> <rect x="10" y="14" width="3" height="5" rx=".5"></rect> <path d="M6 10h.01M6 19h.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">文本到 ASCII 二进制</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将文本转换为其 ASCII 二进制表示形式，反之亦然。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/text-to-unicode" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 6h16"></path> <path d="M4 18h5"></path> <path d="M4 12h13a3 3 0 0 1 0 6h-4l2-2m0 4l-2-2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">文本转 Unicode</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析文本并将其转换为 unicode，反之亦然</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/yaml-to-json-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 6h16"></path> <path d="M4 12h16"></path> <path d="M4 18h12"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">YAML到JSON转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用此在线转换器将YAML转换为JSON。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/yaml-to-toml" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 6h16"></path> <path d="M4 12h16"></path> <path d="M4 18h12"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">YAML 到 TOML</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析YAML并将其转换为TOML。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/json-to-yaml-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 4a2 2 0 0 0-2 2v3a2 3 0 0 1-2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2"></path> <path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0-2 3v3a2 2 0 0 1-2 2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">JSON到YAML转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">在线转换将JSON转换为YAML。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/json-to-toml" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 4a2 2 0 0 0-2 2v3a2 3 0 0 1-2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2"></path> <path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0-2 3v3a2 2 0 0 1-2 2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">JSON 转 TOML</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析JSON并将其转换为TOML。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/list-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 6h11"></path> <path d="M9 12h11"></path> <path d="M9 18h11"></path> <path d="M5 6v.01"></path> <path d="M5 12v.01"></path> <path d="M5 18v.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">List 转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">该工具可以处理基于数组的数据，并将各种更改（转置、添加前缀和后缀、反向列表、排序列表、小写值、截断值）应用于每一行。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/toml-to-json" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="M15 4v2h3v12h-3v2h5V4M4 4v16h5v-2H6V6h3V4z"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">TOML 到 JSON</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析TOML并将其转换为JSON。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/toml-to-yaml" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="M15 4v2h3v12h-3v2h5V4M4 4v16h5v-2H6V6h3V4z"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">TOML 到 YAML</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">Parse and convert TOML to YAML.</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/url-encoder" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path> <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">编码/解码url格式的字符串</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">编码为url编码格式（也称为“百分比编码”）或从中解码。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/html-entities" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 8l-4 4l4 4"></path> <path d="M17 8l4 4l-4 4"></path> <path d="M14 4l-4 16"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">转义html实体</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">转义或unescape html实体（将&lt;、&gt;、&amp;、“和'替换为其html版本）</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/url-parser" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10 14a3.5 3.5 0 0 0 5 0l4-4a3.5 3.5 0 0 0-5-5l-.5.5"></path> <path d="M14 10a3.5 3.5 0 0 0-5 0l-4 4a3.5 3.5 0 0 0 5 5l.5-.5"></path> <path d="M16 21v-2"></path> <path d="M19 16h2"></path> <path d="M3 8h2"></path> <path d="M8 3v2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Url分析器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析url字符串以获取所有不同的部分（协议、来源、参数、端口、用户名密码…）</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/device-information" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="12" rx="1"></rect> <path d="M7 20h10"></path> <path d="M9 16v4"></path> <path d="M15 16v4"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">设备信息</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">获取有关当前设备的信息（屏幕大小、像素比率、用户代理…）</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/basic-auth-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M3 17h18c.55 0 1 .45 1 1s-.45 1-1 1H3c-.55 0-1-.45-1-1s.45-1 1-1zm-.5-4.43c.36.21.82.08 1.03-.28l.47-.82l.48.83c.21.36.67.48 1.03.28c.36-.21.48-.66.28-1.02l-.49-.84h.95c.41 0 .75-.34.75-.75s-.34-.75-.75-.75H5.3l.47-.82c.21-.36.09-.82-.27-1.03a.764.764 0 0 0-1.03.28L4 8.47l-.47-.82a.764.764 0 0 0-1.03-.28c-.36.21-.48.67-.27 1.03l.47.82h-.95c-.41 0-.75.34-.75.75s.34.75.75.75h.95l-.48.83c-.2.36-.08.82.28 1.02zm8 0c.36.21.82.08 1.03-.28l.47-.82l.48.83c.21.36.67.48 1.03.28c.36-.21.48-.66.28-1.02l-.48-.83h.95c.41 0 .75-.34.75-.75s-.34-.75-.75-.75h-.96l.47-.82a.76.76 0 0 0-.27-1.03a.746.746 0 0 0-1.02.27l-.48.82l-.47-.82a.742.742 0 0 0-1.02-.27c-.36.21-.48.67-.27 1.03l.47.82h-.96a.74.74 0 0 0-.75.74c0 .41.34.75.75.75h.95l-.48.83c-.2.36-.08.82.28 1.02zM23 9.97c0-.41-.34-.75-.75-.75h-.95l.47-.82a.76.76 0 0 0-.27-1.03a.746.746 0 0 0-1.02.27l-.48.83l-.47-.82a.742.742 0 0 0-1.02-.27c-.36.21-.48.67-.27 1.03l.47.82h-.95a.743.743 0 0 0-.76.74c0 .41.34.75.75.75h.95l-.48.83a.74.74 0 0 0 .28 1.02c.36.21.82.08 1.03-.28l.47-.82l.48.83c.21.36.67.48 1.03.28c.36-.21.48-.66.28-1.02l-.48-.83h.95c.4-.01.74-.35.74-.76z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">基本身份验证生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">从用户名和密码生成 base64 基本身份验证标头。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/og-meta-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7.859 6H5.025A2.025 2.025 0 0 0 3 8.025v2.834c0 .537.213 1.052.593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834-2.834a2.025 2.025 0 0 0 0-2.864L9.29 6.593A2.025 2.025 0 0 0 7.859 6z"></path> <path d="M17.573 18.407l2.834-2.834a2.025 2.025 0 0 0 0-2.864L13.29 5.593"></path> <path d="M6 9h-.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">开放式图形元生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">为您的网站生成开放式图形和社交html元标记。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/otp-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="7" y="4" width="10" height="16" rx="1"></rect> <path d="M11 5h2"></path> <path d="M12 17v.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">OTP代码生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">为多因素身份验证生成和验证基于时间的OTP（一次性密码）。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/mime-types" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="9"></circle> <path d="M3.6 9h16.8"></path> <path d="M3.6 15h16.8"></path> <path d="M11.5 3a17 17 0 0 0 0 18"></path> <path d="M12.5 3a17 17 0 0 1 0 18"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">mime类型</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将mime类型转换为扩展，反之亦然。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/jwt-parser" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="8" cy="15" r="4"></circle> <path d="M10.85 12.15L19 4"></path> <path d="M18 5l2 2"></path> <path d="M15 8l2 2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">JWT 解析器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析和解码JSON Web Token（jwt）并显示其内容。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/keycode-info" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="6" width="20" height="12" rx="2"></rect> <path d="M6 10h0"></path> <path d="M10 10h0"></path> <path d="M14 10h0"></path> <path d="M18 10h0"></path> <path d="M6 14v.01"></path> <path d="M18 14v.01"></path> <path d="M10 14h4"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Keycode 信息</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">查找任何按下的键的javascript键代码、代码、位置和修饰符。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/slugify-string" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M7.25 15c-.41 0-.75-.34-.75-.75v-.75h-2v.75c0 .41-.34.75-.75.75S3 14.66 3 14.25V10c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4.25c0 .41-.34.75-.75.75zm-.75-4.5h-2V12h2v-1.5zm7 1.5c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1c0 .55-.45 1-1 1zM11 10.5v.75h2v-.75h-2zm2 2.25h-2v.75h2v-.75zm8-2.5c0 .41-.34.75-.75.75a.76.76 0 0 1-.71-.5H17.5v3h2.04c.1-.29.38-.5.71-.5c.41 0 .75.34.75.75V14c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v.25z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">打乱字符串</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">确保字符串 url、文件名和 id 安全。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/html-wysiwyg-editor" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 7H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2v-3"></path> <path d="M9 15h3l8.5-8.5a1.5 1.5 0 0 0-3-3L9 12v3"></path> <path d="M16 5l3 3"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">HTML所见即所得编辑器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">在线HTML编辑器具有功能丰富的所见即所得编辑器，立即获得内容的源代码。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/user-agent-parser" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="4" y="4" width="16" height="16" rx="1"></rect> <path d="M4 8h16"></path> <path d="M8 4v4"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">用户代理分析器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">从用户代理字符串中检测和分析浏览器、引擎、操作系统、CPU和设备类型/型号。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/http-status-codes" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M4.5 11h-2V9.75c0-.41-.34-.75-.75-.75S1 9.34 1 9.75v4.5c0 .41.34.75.75.75s.75-.34.75-.75V12.5h2v1.75c0 .41.34.75.75.75s.75-.34.75-.75v-4.5C6 9.34 5.66 9 5.25 9s-.75.34-.75.75V11zm3.25-.5h.75v3.75c0 .41.34.75.75.75s.75-.34.75-.75V10.5h.75c.41 0 .75-.34.75-.75S11.16 9 10.75 9h-3c-.41 0-.75.34-.75.75s.34.75.75.75zm5.5 0H14v3.75c0 .41.34.75.75.75s.75-.34.75-.75V10.5h.75c.41 0 .75-.34.75-.75S16.66 9 16.25 9h-3c-.41 0-.75.34-.75.75s.34.75.75.75zM21.5 9H19c-.55 0-1 .45-1 1v4.25c0 .41.34.75.75.75s.75-.34.75-.75V13h2c.83 0 1.5-.68 1.5-1.5v-1c0-.82-.67-1.5-1.5-1.5zm0 2.5h-2v-1h2v1z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">HTTP 状态码</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">所有HTTP状态的列表对其名称和含义解释。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/json-diff" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M9.01 14H3c-.55 0-1 .45-1 1s.45 1 1 1h6.01v1.79c0 .45.54.67.85.35l2.78-2.79c.19-.2.19-.51 0-.71l-2.78-2.79c-.31-.32-.85-.09-.85.35V14zm5.98-2.21V10H21c.55 0 1-.45 1-1s-.45-1-1-1h-6.01V6.21c0-.45-.54-.67-.85-.35l-2.78 2.79c-.19.2-.19.51 0 .71l2.78 2.79a.5.5 0 0 0 .85-.36z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">JSON 差异比较</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">比较两个JSON对象并获得它们之间的差异。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/safelink-decoder" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10 21v-6.5a3.5 3.5 0 0 0-7 0V21h18v-6a4 4 0 0 0-4-4H6.5"></path> <path d="M12 11V3h4l2 2l-2 2h-4"></path> <path d="M6 15h1"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Outlook Safelink decoder</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">Decode Outlook SafeLink links</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/qrcode-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="4" y="4" width="6" height="6" rx="1"></rect> <path d="M7 17v.01"></path> <rect x="14" y="4" width="6" height="6" rx="1"></rect> <path d="M7 7v.01"></path> <rect x="4" y="14" width="6" height="6" rx="1"></rect> <path d="M17 7v.01"></path> <path d="M14 14h3"></path> <path d="M20 14v.01"></path> <path d="M14 14v3"></path> <path d="M14 20h3"></path> <path d="M17 17h3"></path> <path d="M20 17v3"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">二维码生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">生成并下载url或文本的QR代码，并自定义背景和前景颜色。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/wifi-qrcode-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="4" y="4" width="6" height="6" rx="1"></rect> <path d="M7 17v.01"></path> <rect x="14" y="4" width="6" height="6" rx="1"></rect> <path d="M7 7v.01"></path> <rect x="4" y="14" width="6" height="6" rx="1"></rect> <path d="M17 7v.01"></path> <path d="M14 14h3"></path> <path d="M20 14v.01"></path> <path d="M14 14v3"></path> <path d="M14 20h3"></path> <path d="M17 17h3"></path> <path d="M20 17v3"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">WiFi 二维码生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">生成和下载QR码以快速连接到WiFi网络。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/svg-placeholder-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14L6 17h12l-3.86-5.14z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">SVG 占位符生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">生成 svg 图像以用作应用程序中的占位符。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/camera-recorder" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 7h1a2 2 0 0 0 2-2a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1a2 2 0 0 0 2 2h1a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2"></path> <circle cx="12" cy="13" r="3"></circle> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">摄像机记录器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">从网络摄像头或照相机拍摄照片或录制视频。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/git-memo" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="16" cy="12" r="1"></circle> <circle cx="12" cy="8" r="1"></circle> <circle cx="12" cy="16" r="1"></circle> <path d="M12 15V9"></path> <path d="M15 11l-2-2"></path> <path d="M11 7L9.1 5.1"></path> <path d="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Git 备忘录</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">Git是一种去中心化的版本管理软件。使用此备忘单，您可以快速访问最常见的git命令.</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/random-port-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="4" width="18" height="8" rx="3"></rect> <rect x="3" y="12" width="18" height="8" rx="3"></rect> <path d="M7 8v.01"></path> <path d="M7 16v.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">随机端口生成</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">生成“已知”端口范围（0-1023）之外的随机端口号。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/crontab-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="13" r="7"></circle> <path d="M12 10v3h2"></path> <path d="M7 4L4.25 6"></path> <path d="M17 4l2.75 2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Crontab 表达式生成</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">验证并生成crontab，并获取cron调度的可读描述。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/json-prettify" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 4a2 2 0 0 0-2 2v3a2 3 0 0 1-2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2"></path> <path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0-2 3v3a2 2 0 0 1-2 2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">JSON美化和格式化</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将JSON字符串修饰为友好的可读格式。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/json-minify" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 4a2 2 0 0 0-2 2v3a2 3 0 0 1-2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2"></path> <path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0-2 3v3a2 2 0 0 1-2 2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">JSON 压缩</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">通过删除不必要的空白来缩小和压缩JSON。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/json-to-csv" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 6h11"></path> <path d="M9 12h11"></path> <path d="M9 18h11"></path> <path d="M5 6v.01"></path> <path d="M5 12v.01"></path> <path d="M5 18v.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">JSON 转 CSV</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用自动标头检测将JSON转换为CSV。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/sql-prettify" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <ellipse cx="12" cy="6" rx="8" ry="3"></ellipse> <path d="M4 6v6a8 3 0 0 0 16 0V6"></path> <path d="M4 12v6a8 3 0 0 0 16 0v-6"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">SQL 美化和格式化</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">在线格式化和美化您的 SQL 查询（它支持各种 SQL 方言）。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/chmod-calculator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"></path> <path d="M9 7h1"></path> <path d="M9 13h6"></path> <path d="M13 17h2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Chmod 计算器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">使用此在线的chmod计算器计算chmod权限和命令。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/docker-run-to-docker-compose-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 12.54c-1.804-.345-2.701-1.08-3.523-2.94c-.487.696-1.102 1.568-.92 2.4c.028.238-.32 1.002-.557 1H3c0 5.208 3.164 7 6.196 7c4.124.022 7.828-1.376 9.854-5c1.146-.101 2.296-1.505 2.95-2.46z"></path> <path d="M5 10h3v3H5z"></path> <path d="M8 10h3v3H8z"></path> <path d="M11 10h3v3h-3z"></path> <path d="M8 7h3v3H8z"></path> <path d="M11 7h3v3h-3z"></path> <path d="M11 4h3v3h-3z"></path> <path d="M4.571 18c1.5 0 2.047-.074 2.958-.78"></path> <path d="M10 16v.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Docker Run 到 docker-compose 转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将 docker run 命令行转换为 docker-compose 文件!</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/xml-formatter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M7 8l-4 4l4 4"></path> <path d="M17 8l4 4l-4 4"></path> <path d="M14 4l-4 16"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">XML 格式化</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将XML字符串修饰为友好的可读格式。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/yaml-prettify" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 6h16"></path> <path d="M4 12h16"></path> <path d="M4 18h12"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">YAML美化和格式化</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">将YAML字符串修饰为友好的可读格式。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/ipv4-subnet-calculator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M16 4.2c1.5 0 3 .6 4.2 1.7l.8-.8C19.6 3.7 17.8 3 16 3s-3.6.7-5 2.1l.8.8C13 4.8 14.5 4.2 16 4.2zm-3.3 2.5l.8.8c.7-.7 1.6-1 2.5-1s1.8.3 2.5 1l.8-.8c-.9-.9-2.1-1.4-3.3-1.4s-2.4.5-3.3 1.4zM19 13h-2V9h-2v4H5c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-4c0-1.1-.9-2-2-2zm0 6H5v-4h14v4zM6 16h2v2H6zm3.5 0h2v2h-2zm3.5 0h2v2h-2z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">IPv4子网计算器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析IPv4 CIDR块，并获取有关子网络的所有所需信息。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/ipv4-address-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M11 10V5h-1m8 14v-5h-1"></path> <rect x="15" y="5" width="3" height="5" rx=".5"></rect> <rect x="10" y="14" width="3" height="5" rx=".5"></rect> <path d="M6 10h.01M6 19h.01"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Ipv4地址转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">在ipv6中，将ip地址转换为十进制、二进制、十六进制或事件</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/ipv4-range-expander" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">IPv4范围扩展器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">给定起始和结束IPv4地址，此工具使用其CIDR表示法计算有效的IPv4网络。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/mac-address-lookup" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="13" y="8" width="8" height="12" rx="1"></rect> <path d="M18 8V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h9"></path> <path d="M16 9h2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">MAC地址查找</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">通过设备的MAC地址查找设备的供应商和制造商。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/mac-address-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="13" y="8" width="8" height="12" rx="1"></rect> <path d="M18 8V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h9"></path> <path d="M16 9h2"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">MAC 地址生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">输入数量和前缀。MAC地址将以您选择的大小写（大写或小写）生成</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/ipv6-ula-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 21c1.147-4.02 1.983-8.027 2-12h6c.017 3.973.853 7.98 2 12"></path> <path d="M12.5 13H17c.025 2.612.894 5.296 2 8"></path> <path d="M9 5a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1a2.4 2.4 0 0 0 2 1a2.4 2.4 0 0 0 2-1a2.4 2.4 0 0 1 2-1a2.4 2.4 0 0 1 2 1"></path> <path d="M3 21h19"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">IPv6 ULA生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">根据RFC4193在网络上生成您自己的本地不可路由IP地址。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/math-evaluator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 13l4 4m0-4l-4 4"></path> <path d="M20 5h-7L9 19l-3-6H4"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">数学计算器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">计算数学表达式的计算器。您可以使用sqrt、cos、sin、abs等函数。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/eta-calculator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M6.5 7h11"></path> <path d="M6.5 17h11"></path> <path d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1z"></path> <path d="M6 4v2a6 6 0 1 0 12 0V4a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">ETA 计算器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">ETA（估计到达时间）计算器，用于知道任务的近似结束时间，例如下载的结束时刻。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/percentage-calculator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="17" cy="17" r="1"></circle> <circle cx="7" cy="7" r="1"></circle> <path d="M6 18L18 6"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">百分比计算器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">轻松计算从一个值到另一个值的百分比，或从百分比到值的百分比。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/chronometer" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M15 1H9v2h6V1zm-4 13h2V8h-2v6zm8.03-6.61l1.42-1.42c-.43-.51-.9-.99-1.41-1.41l-1.42 1.42A8.962 8.962 0 0 0 12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9a8.994 8.994 0 0 0 7.03-14.61zM12 20c-3.87 0-7-3.13-7-7s3.13-7 7-7s7 3.13 7 7s-3.13 7-7 7z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">计时器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">监控事物的持续时间。基本上是一种具有简单计时器功能的计时器。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/temperature-converter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M10 13.5a4 4 0 1 0 4 0V5a2 2 0 0 0-4 0v8.5"></path> <path d="M10 9h4"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">温度转换器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">开尔文、摄氏度、华氏度、兰金、德莱尔、牛顿、雷奥穆尔和罗默温度度数转换。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/benchmark-builder" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1a10 10 0 0 0-.27-10.44zm-9.79 6.84a2 2 0 0 0 2.83 0l5.66-8.49l-8.49 5.66a2 2 0 0 0 0 2.83z" fill="currentColor"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">基准生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">简单的在线基准构建器可以轻松比较任务的执行时间。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/lorem-ipsum-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M4 6h16"></path> <path d="M4 12h16"></path> <path d="M4 18h12"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Lorem ipsum生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">Lorem ipsum是一种占位符文本，通常用于演示文档或字体的视觉形式，而不依赖于有意义的内容</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/text-statistics" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"></path> <path d="M9 9h1"></path> <path d="M9 13h6"></path> <path d="M9 17h6"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">文本统计</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">获取有关文本、字符数、字数、大小等的信息</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/emoji-picker" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="9"></circle> <path d="M9 10h.01"></path> <path d="M15 10h.01"></path> <path d="M9.5 15a3.5 3.5 0 0 0 5 0"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">Emoji 选择器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">轻松复制和粘贴Emoji表情符号，并获得每个表情符号的unicode和code points值.</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/string-obfuscator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M3 3l18 18"></path> <path d="M10.584 10.587a2 2 0 0 0 2.828 2.83"></path> <path d="M9.363 5.365A9.466 9.466 0 0 1 12 5c4 0 7.333 2.333 10 7c-.778 1.361-1.612 2.524-2.503 3.488m-2.14 1.861C15.726 18.449 13.942 19 12 19c-4 0-7.333-2.333-10-7c1.369-2.395 2.913-4.175 4.632-5.341"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">字符串混淆器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">混淆字符串（如秘密、IBAN 或令牌），使其可共享和可识别，而不泄露其内容。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/text-diff" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M14 3v4a1 1 0 0 0 1 1h4"></path> <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z"></path> <path d="M12 10v4"></path> <path d="M10 12h4"></path> <path d="M10 17h4"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">文本比较</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">比较两个文本并查看它们之间的差异。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/numeronym-generator" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" version="1.2" viewBox="0 0 50 50"> <path fill="currentColor" d="M.7 35V18.3q1.1-.2 2.8-.5t4-.3q2.1 0 3.4.6 1.4.5 2.2 1.6.8 1 1.1 2.5.4 1.4.4 3.2V35h-3.1v-9q0-1.6-.2-2.7t-.7-1.8-1.4-1q-.8-.3-2-.3h-1q-.6 0-1 .1-.5 0-.9.1t-.5.1V35zm18.8 0h-3.2q.2-2.6.9-5.5.8-3 1.9-5.7 1.1-2.8 2.4-5.1 1.3-2.4 2.5-3.9H12.9v-2.7h14.6v2.6q-1.1 1.2-2.4 3.4-1.4 2.2-2.6 5-1.1 2.7-2 5.8-.8 3-1 6.1m6.6 0V18.3q1.1-.2 2.8-.5 1.8-.3 4-.3 1.7 0 2.8.4 1.1.5 1.9 1.3.2-.1.7-.4t1.2-.6q.8-.3 1.7-.5.8-.2 1.9-.2 1.9 0 3.2.6 1.3.5 2 1.6.7 1 .9 2.5.3 1.4.3 3.2V35h-3.1v-9q0-1.5-.2-2.6-.1-1.1-.5-1.8t-1.1-1.1q-.7-.3-1.9-.3-1.5 0-2.5.4t-1.4.7q.3.9.4 1.9t.1 2.2V35h-3v-9q0-1.5-.2-2.6t-.6-1.8-1.1-1.1q-.7-.3-1.8-.3h-1q-.5 0-1 .1-.5 0-.9.1t-.5.1V35z" aria-label="n7m"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">数字名称生成器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">数字名是一个用数字构成缩写的词。例如，“i18n”是“国际化”的名词，其中18表示单词中第一个i和最后一个n之间的字母数。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/ascii-text-drawer" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="8" y="8" width="8" height="8" rx="1"></rect> <path d="M3 8h1"></path> <path d="M3 16h1"></path> <path d="M8 3v1"></path> <path d="M16 3v1"></path> <path d="M20 8h1"></path> <path d="M20 16h1"></path> <path d="M8 20v1"></path> <path d="M16 20v1"></path> </g> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">ASCII Art Text Generator</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">Create ASCII art text with many fonts and styles.</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/phone-parser-and-formatter" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"> <path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">电话分析器和格式化程序</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">解析、验证和格式化电话号码。获取有关电话号码的信息，如国家/地区代码、类型等。</div> </div> </a> <a data-v-856c1567="" href="http://fukit.cn/iban-validator-and-parser" class="decoration-none"> <div data-v-236d2dc6="" class="c-card h-full transition transition-duration-0.5s !border-2px !hover:border-primary" style="--51386d66: #ffffff; --1d9c24b0: #efeff5;"> <!----> <div flex="" items-center="" justify-between=""> <i class="text-neutral-400 dark:text-neutral-600 n-icon" role="img" style="--n-bezier: cubic-bezier(.4, 0, .2, 1); font-size: 40px;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="M11.5 1L2 6v2h19V6m-5 4v7h3v-7M2 22h19v-3H2m8-9v7h3v-7m-9 0v7h3v-7z"></path> </svg> </i> <div flex="" items-center="" gap-8px=""> <!----> <div relative="" inline-block=""> <div> <button data-v-147876cf="" class="c-button circle" style="opacity: 0.2; --9a468bfe: 14px; --09441655: 34px; --e1cab870: #333639; --645976e7: transparent; --cea95e96: rgba(46, 51, 56, 0.09); --369e4b1b: rgba(46, 51, 56, 0.22); --c8f65826: #18a058;"> <svg viewBox="0 0 24 24" width="1.2em" height="1.2em"> <path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"></path> </svg> </button> </div> <div class="absolute z-10 whitespace-nowrap rounded bg-black px-12px py-6px text-sm text-white shadow-lg transition transition transition-duration-0.2s op-0 scale-0 bottom-100% left-50% -translate-x-1/2 mb-5px"> <!----> </div> </div> </div> </div> <div class="truncat my-5px text-lg text-black dark:text-white">IBAN验证器和解析器</div> <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">验证和分析IBAN编号。检查IBAN是否有效，并获取国家BBAN，如果它是QR-IBAN和IBAN友好格式。</div> </div> </a> </div> <ImgView title="程序员的工具箱" url="https://5.z.wiki/autoupload/20240405/61DT.2026X3568-image.png" />: "有用，支持一下。", : "https://******/u/Ow6UbH", : "原项目**：https://******/u/Ow6UbH", : "原项目**：https://******/u/Ow6UbH", : "从 GitHub 上找到的项目，纯前端。",