released v1.25.0

* doc: maybe better translate.

Signed-off-by: 秋雨落 <i@rain.cx>

* Update cs.md

Signed-off-by: 秋雨落 <i@rain.cx>

.github/workflows/win.yml

@@ -0,0 +1,27 @@
+name: Win CI
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - run: npm install
+      - run: npm run build
+      - run: |
+          cd ${{ github.workspace }}
+          ls
+          cd dist
+          ls
+
+      - uses: actions/upload-artifact@v3
+        with:
+          name: dist
+          path: ${{ github.workspace }}\dist\**\*

CONTRIBUTING.md

@@ -98,18 +98,21 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
   <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq"/>
 </a>
+<a href="https://github.com/mofelee" title="mofelee">
+  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
+</a>
 <a href="https://github.com/Alex-Programer" title="Alex">
   <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
 </a>
 <a href="https://github.com/expoli" title="expoli">
   <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
 </a>
-<a href="https://github.com/mofelee" title="mofelee">
-  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
   <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
+<a href="https://github.com/sjh42" title="42:p">
+  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
+</a>
 <a href="https://github.com/partoneplay" title="partoneplay">
   <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
 </a>
@@ -122,9 +125,6 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/13812700839" title="花殇">
   <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
 </a>
-<a href="https://github.com/sjh42" title="42:p">
-  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
-</a>
 <a href="https://github.com/Smartdousha" title="Anko">
   <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
 </a>
@@ -149,6 +149,9 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/Lihuagreek" title="Lihuagreek">
   <img src="https://avatars.githubusercontent.com/u/51040740?v=4" width="42;" alt="Lihuagreek"/>
 </a>
+<a href="https://github.com/LufsX" title="LufsX">
+  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
+</a>
 <a href="https://github.com/mariuszmichalowski" title="Mariusz Michalowski">
   <img src="https://avatars.githubusercontent.com/u/92091891?v=4" width="42;" alt="Mariusz Michalowski"/>
 </a>
@@ -197,6 +200,9 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/lykjjj" title="lykjjj">
   <img src="https://avatars.githubusercontent.com/u/58510058?v=4" width="42;" alt="lykjjj"/>
 </a>
+<a href="https://github.com/mancuoj" title="mancuoj">
+  <img src="https://avatars.githubusercontent.com/u/45707684?v=4" width="42;" alt="mancuoj"/>
+</a>
 <a href="https://github.com/onewesong" title="onewesong">
   <img src="https://avatars.githubusercontent.com/u/17920822?v=4" width="42;" alt="onewesong"/>
 </a>
@@ -212,6 +218,9 @@ npm run start  # 监听 md 文件编译输出 HTML
 <a href="https://github.com/lvzhenbo" title="吕振波">
   <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
 </a>
+<a href="https://github.com/qyl27" title="秋雨落">
+  <img src="https://avatars.githubusercontent.com/u/53731501?v=4" width="42;" alt="秋雨落"/>
+</a>
 <a href="https://github.com/lisheng741" title="芦荟柚子茶">
   <img src="https://avatars.githubusercontent.com/u/53617305?v=4" width="42;" alt="芦荟柚子茶"/>
 </a><!--GAMFC-END-->

README.md

@@ -19,142 +19,147 @@ Quick Reference
 坑已挖，需要您的参与完善和贡献！🙏
 <!--rehype:style=padding-bottom: 23px;-->
 
-[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0/var(\-\-bg\-opacity));&class=contributing tag&data-lang=RedHad&data-info=👆看看还缺点儿什么？-->
+[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0);&class=contributing tag&data-lang=RedHat&data-info=👆看看还缺点儿什么？-->
-[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
+[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192);&class=contributing-->
-[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
+[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
-[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->
-[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
+[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9);&class=contributing-->
-[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128/var(\-\-bg\-opacity));&class=contributing-->
+[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->
-[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128/var(\-\-bg\-opacity));-->
+[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128);&class=contributing-->
-[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168/var(\-\-bg\-opacity));&class=contributing-->
+[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
-[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));&class=contributing-->
+[NestJS](./docs/nestjs.md)<!--rehype:style=background: rgb(237 21 67);&class=contributing-->
-[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
+[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168);&class=contributing-->
+[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131);&class=contributing-->
+[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
 <!--rehype:class=home-card-->
 
 ## 编程
 
-[Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
+[Bash](./docs/bash.md)<!--rehype:style=background: rgb(72 143 223);-->
-[C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));-->
+[C](./docs/c.md)<!--rehype:style=background: rgb(92 107 192);-->
-[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
+[C#](./docs/cs.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
-[CPP](./docs/cpp.md)<!--rehype:style=background: rgb(6 147 13/var(\-\-bg\-opacity));&class=contributing-->
+[C++](./docs/cpp.md)<!--rehype:style=background: rgb(6 147 13);&class=contributing-->
-[Dart](./docs/dart.md)<!--rehype:style=background: rgb(64 196 255/var(\-\-bg\-opacity));-->
+[Dart](./docs/dart.md)<!--rehype:style=background: rgb(64 196 255);-->
-[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
+[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223);-->
-[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));&class=tag&data-lang=Docker-->
+[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153);&class=tag&data-lang=Docker-->
-[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python-->
+[Django](./docs/djiango.md)<!--rehype:style=background: rgb(12 75 51);&class=contributing tag&data-lang=Python-->
-[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
+[Flutter](./docs/flutter.md)<!--rehype:style=background: rgb(150 220 254);&class=contributing tag&data-lang=Dart-->
-[GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146/var(\-\-bg\-opacity));-->
+[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193);-->
-[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+[GraphQL](./docs/graphql.md)<!--rehype:style=background: rgb(214 66 146);-->
-[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
+[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60);-->
-[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
+[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60);-->
-[Julia](./docs/julia.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
+[Java](./docs/java.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
-[Kotlin](./docs/kotlin.md)<!--rehype:style=background: rgb(211 55 49/var(\-\-bg\-opacity));&class=contributing&data-info=👆看看还缺点儿什么？-->
+[Julia](./docs/julia.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
-[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128/var(\-\-bg\-opacity));&class=contributing-->
+[Kotlin](./docs/kotlin.md)<!--rehype:style=background: rgb(211 55 49);&class=contributing&data-info=👆看看还缺点儿什么？-->
-[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
+[LaTeX](./docs/latex.md)<!--rehype:style=background: rgb(0 128 128);&class=contributing-->
-[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(1 117 143/var(\-\-bg\-opacity));&class=tag&data-lang=SQL-->
+[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156);-->
-[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168/var(\-\-bg\-opacity));&class=contributing-->
+[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(1 117 143);&class=tag&data-lang=SQL-->
-[PHP](./docs/php.md)<!--rehype:style=background: rgb(79 91 147/var(\-\-bg\-opacity));-->
+[MATLAB](./docs/matlab.md)<!--rehype:style=background: rgb(0 118 168);&class=contributing-->
-[Python](./docs/python.md)<!--rehype:style=background: rgb(43 91 132/var(\-\-bg\-opacity));-->
+[PHP](./docs/php.md)<!--rehype:style=background: rgb(79 91 147);-->
-[PostgreSQL](./docs/postgres.md)<!--rehype:style=background: rgb(43 109 163/var(\-\-bg\-opacity));&class=tag&data-lang=SQL-->
+[Python](./docs/python.md)<!--rehype:style=background: rgb(43 91 132);-->
-[Ruby](./docs/ruby.md)<!--rehype:style=background: rgb(204 52 45/var(\-\-bg\-opacity));-->
+[PostgreSQL](./docs/postgres.md)<!--rehype:style=background: rgb(43 109 163);&class=tag&data-lang=SQL-->
-[Rust](./docs/rust.md)<!--rehype:style=background: rgb(71 71 71/var(\-\-bg\-opacity));-->
+[Ruby](./docs/ruby.md)<!--rehype:style=background: rgb(204 52 45);-->
-[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
+[Rust](./docs/rust.md)<!--rehype:style=background: rgb(71 71 71);-->
-[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));&class=tag&data-lang=swift-->
+[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57);-->
-[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247);&class=tag&data-lang=swift-->
-[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
+[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132);-->
-[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128/var(\-\-bg\-opacity));-->
+[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230);-->
-[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44/var(\-\-bg\-opacity));&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
+[Lua](./docs/lua.md)<!--rehype:style=background: rgb(3 3 128);-->
+[Pytorch](./docs/pytorch.md)<!--rehype:style=background: rgb(238 76 44);&class=contributing tag&data-lang=Python&data-info=👆看看还缺点儿什么？-->
 <!--rehype:class=home-card-->
 
 ## 前端
 
-[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[CSS 3](./docs/css.md)<!--rehype:style=background: rgb(35 115 205);&class=tag&data-lang=CSS-->
-[Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
+[Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153);-->
-[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
+[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23);-->
-[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));&class=tag&data-lang=JS-->
+[ES 6](./docs/es6.md)<!--rehype:style=background: rgb(122 203 23);&class=tag&data-lang=JS-->
-[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
+[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184);-->
-[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63);&class=tag&data-lang=CSS-->
-[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154);&class=tag&data-lang=CSS-->
-[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
+[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39);-->
-[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
+[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31);-->
-[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93);&class=tag&data-lang=CSS-->
-[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
+[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173);-->
-[RegEx 正则表达式](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
+[RegEx 正则表达式](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155);-->
-[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
+[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198);-->
-[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
+[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131);-->
-[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));&class=contributing-->
+[Vue 3](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131);&class=contributing-->
 <!--rehype:class=home-card-->
 
 ## Nodejs
 
-[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+[Express.js](./docs/expressjs.md)<!--rehype:style=background: rgb(95 151 206);-->
-[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
+[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91);-->
-[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206/var(\-\-bg\-opacity));-->
+[Koa.js](./docs/koajs.md)<!--rehype:style=background: rgb(95 151 206);-->
-[Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252/var(\-\-bg\-opacity));-->
+[Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252);-->
-[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
+[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0);-->
-[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
+[NestJS](./docs/nestjs.md)<!--rehype:style=background: rgb(237 21 67);&class=contributing-->
-[Yarn](./docs/yarn.md)<!--rehype:style=background: rgb(33 136 182/var(\-\-bg\-opacity));-->
+[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132);-->
+[Yarn](./docs/yarn.md)<!--rehype:style=background: rgb(33 136 182);-->
 <!--rehype:class=home-card-->
 
 ## 工具
 
-[Emacs](./docs/emacs.md)<!--rehype:style=background: rgb(98 36 134/var(\-\-bg\-opacity));-->
+[Emacs](./docs/emacs.md)<!--rehype:style=background: rgb(98 36 134);-->
-[Gmail](./docs/gmail.md)<!--rehype:style=background: rgb(234 67 54/var(\-\-bg\-opacity));-->
+[Gmail](./docs/gmail.md)<!--rehype:style=background: rgb(234 67 54);-->
-[nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 153 0/var(\-\-bg\-opacity));-->
+[nginx](./docs/nginx.md)<!--rehype:style=background: rgb(0 153 0);-->
-[Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141/var(\-\-bg\-opacity));-->
+[Semver](./docs/semver.md)<!--rehype:style=background: rgb(106 111 141);-->
-[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
+[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0);&class=tag&data-lang=macOS-->
-[Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));-->
+[Sublime Text](./docs/sublime-text.md)<!--rehype:style=background: rgb(223 148 0);-->
-[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
+[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230);-->
-[Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8/var(\-\-bg\-opacity));-->
+[Vim](./docs/vim.md)<!--rehype:style=background: rgb(9 150 8);-->
-[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(32 148 220/var(\-\-bg\-opacity));-->
+[WebStorm](./docs/webstorm.md)<!--rehype:style=background: rgb(32 148 220);-->
-[XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
+[XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230);-->
-[Xcode](./docs/xcode.md)<!--rehype:style=background: rgb(24 151 233/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
+[Xcode](./docs/xcode.md)<!--rehype:style=background: rgb(24 151 233);&class=tag&data-lang=macOS-->
 <!--rehype:class=home-card-->
 
 ## 命令
 
-[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0/var(\-\-bg\-opacity));&class=contributing tag&data-lang=RedHad&data-info=👆看看还缺点儿什么？-->
+[Ansible](./docs/ansible.md)<!--rehype:style=background: rgb(238 0 0);&class=contributing tag&data-lang=RedHat&data-info=👆看看还缺点儿什么？-->
-[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Awk](./docs/awk.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Conan](./docs/conan.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=tag&data-lang=C/C++-->
+[Conan](./docs/conan.md)<!--rehype:style=background: rgb(0 193 9);&class=tag&data-lang=C/C++-->
-[CocoaPods](./docs/cocoapods.md)<!--rehype:style=background: rgb(251 0 6/var(\-\-bg\-opacity));&class=tag&data-lang=C/C++-->
+[CocoaPods](./docs/cocoapods.md)<!--rehype:style=background: rgb(251 0 6);&class=tag&data-lang=C/C++-->
-[Cargo](./docs/cargo.md)<!--rehype:style=background: rgb(71 71 71/var(\-\-bg\-opacity));&class=tag&data-lang=Rust-->
+[Cargo](./docs/cargo.md)<!--rehype:style=background: rgb(71 71 71);&class=tag&data-lang=Rust-->
-[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Curl](./docs/curl.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Chmod](./docs/chmod.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));-->
+[Cron](./docs/cron.md)<!--rehype:style=background: rgb(239 68 68);-->
-[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192/var(\-\-bg\-opacity));&class=contributing-->
+[CMake](./docs/cmake.md)<!--rehype:style=background: rgb(92 107 192);&class=contributing-->
-[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
+[Git](./docs/git.md)<!--rehype:style=background: rgb(215 89 62);-->
-[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Grep](./docs/grep.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129);-->
-[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9/var(\-\-bg\-opacity));&class=contributing-->
+[FFmpeg](./docs/ffmpeg.md)<!--rehype:style=background: rgb(0 193 9);&class=contributing-->
-[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));&class=tag&data-lang=macOS-->
+[Homebrew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87);&class=tag&data-lang=macOS-->
-[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129);-->
-[jq](./docs/jq.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=JSON-->
+[jq](./docs/jq.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=JSON-->
-[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Lsof](./docs/lsof.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135/var(\-\-bg\-opacity));-->
+[Mitmproxy](./docs/mitmproxy.md)<!--rehype:style=background: rgb(4 92 135);-->
-[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135);-->
-[OpenSSL](./docs/openssl.md)<!--rehype:style=background: rgb(114 20 18/var(\-\-bg\-opacity));-->
+[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Systemd](./docs/systemd.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[OpenSSL](./docs/openssl.md)<!--rehype:style=background: rgb(114 20 18);-->
-[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[Systemd](./docs/systemd.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99);-->
-[Sysdig](./docs/sysdig.md)<!--rehype:style=background: rgb(1 171 199/var(\-\-bg\-opacity));-->
+[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99);-->
-[Tmux](./docs/tmux.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[Sysdig](./docs/sysdig.md)<!--rehype:style=background: rgb(1 171 199);-->
-[YUM](./docs/yum.md)<!--rehype:style=background: rgb(86 86 123/var(\-\-bg\-opacity));-->
+[Tmux](./docs/tmux.md)<!--rehype:style=background: rgb(99 99 99);-->
-[CMD](./docs/cmd.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
+[YUM](./docs/yum.md)<!--rehype:style=background: rgb(86 86 123);-->
-[APT](./docs/apt.md)<!--rehype:style=background: rgb(30 144 255/var(\-\-bg\-opacity));-->
+[CMD](./docs/cmd.md)<!--rehype:style=background: rgb(99 99 99);-->
-[tar](./docs/tar.md)<!--rehype:style=background: rgb(215 89 62/var(\-\-bg\-opacity));-->
+[APT](./docs/apt.md)<!--rehype:style=background: rgb(30 144 255);-->
+[tar](./docs/tar.md)<!--rehype:style=background: rgb(215 89 62);-->
 <!--rehype:class=home-card-->
 
 ## 其它
 
-[Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=排版说明-->
+[Quick Reference](./docs/quickreference.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=排版说明-->
-[Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255/var(\-\-bg\-opacity));-->
+[Github Actions](./docs/github-actions.md)<!--rehype:style=background: rgb(121 184 255);-->
-[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=CSS-->
+[Colors Named](./docs/colors-named.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=CSS-->
-[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129);-->
-[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));&class=tag&data-lang=HTML-->
+[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129);&class=tag&data-lang=HTML-->
-[ISO 639-1 Language Code](./docs/iso-639-1.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[ISO 639-1 Language Code](./docs/iso-639-1.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129);-->
-[MIME types](./docs/mime.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[MIME types](./docs/mime.md)<!--rehype:style=background: rgb(16 185 129);-->
-[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
+[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129);-->
 <!--rehype:class=home-card-->
 
 ## 看到缺少什么了吗？
@@ -178,18 +183,21 @@ Quick Reference
 <a href="https://github.com/Jack-Zhang-1314" title="fw_qaq">
   <img src="https://avatars.githubusercontent.com/u/82551626?v=4" width="42;" alt="fw_qaq"/>
 </a>
+<a href="https://github.com/mofelee" title="mofelee">
+  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
+</a>
 <a href="https://github.com/Alex-Programer" title="Alex">
   <img src="https://avatars.githubusercontent.com/u/115539090?v=4" width="42;" alt="Alex"/>
 </a>
 <a href="https://github.com/expoli" title="expoli">
   <img src="https://avatars.githubusercontent.com/u/31023767?v=4" width="42;" alt="expoli"/>
 </a>
-<a href="https://github.com/mofelee" title="mofelee">
-  <img src="https://avatars.githubusercontent.com/u/5069410?v=4" width="42;" alt="mofelee"/>
-</a>
 <a href="https://github.com/JeffersonHuang" title="Jefferson">
   <img src="https://avatars.githubusercontent.com/u/47512530?v=4" width="42;" alt="Jefferson"/>
 </a>
+<a href="https://github.com/sjh42" title="42:p">
+  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
+</a>
 <a href="https://github.com/partoneplay" title="partoneplay">
   <img src="https://avatars.githubusercontent.com/u/5189132?v=4" width="42;" alt="partoneplay"/>
 </a>
@@ -202,9 +210,6 @@ Quick Reference
 <a href="https://github.com/13812700839" title="花殇">
   <img src="https://avatars.githubusercontent.com/u/58072506?v=4" width="42;" alt="花殇"/>
 </a>
-<a href="https://github.com/sjh42" title="42:p">
-  <img src="https://avatars.githubusercontent.com/u/34529275?v=4" width="42;" alt="42:p"/>
-</a>
 <a href="https://github.com/Smartdousha" title="Anko">
   <img src="https://avatars.githubusercontent.com/u/52566311?v=4" width="42;" alt="Anko"/>
 </a>
@@ -229,6 +234,9 @@ Quick Reference
 <a href="https://github.com/Lihuagreek" title="Lihuagreek">
   <img src="https://avatars.githubusercontent.com/u/51040740?v=4" width="42;" alt="Lihuagreek"/>
 </a>
+<a href="https://github.com/LufsX" title="LufsX">
+  <img src="https://avatars.githubusercontent.com/u/33221883?v=4" width="42;" alt="LufsX"/>
+</a>
 <a href="https://github.com/mariuszmichalowski" title="Mariusz Michalowski">
   <img src="https://avatars.githubusercontent.com/u/92091891?v=4" width="42;" alt="Mariusz Michalowski"/>
 </a>
@@ -277,6 +285,9 @@ Quick Reference
 <a href="https://github.com/lykjjj" title="lykjjj">
   <img src="https://avatars.githubusercontent.com/u/58510058?v=4" width="42;" alt="lykjjj"/>
 </a>
+<a href="https://github.com/mancuoj" title="mancuoj">
+  <img src="https://avatars.githubusercontent.com/u/45707684?v=4" width="42;" alt="mancuoj"/>
+</a>
 <a href="https://github.com/onewesong" title="onewesong">
   <img src="https://avatars.githubusercontent.com/u/17920822?v=4" width="42;" alt="onewesong"/>
 </a>
@@ -292,6 +303,9 @@ Quick Reference
 <a href="https://github.com/lvzhenbo" title="吕振波">
   <img src="https://avatars.githubusercontent.com/u/32427677?v=4" width="42;" alt="吕振波"/>
 </a>
+<a href="https://github.com/qyl27" title="秋雨落">
+  <img src="https://avatars.githubusercontent.com/u/53731501?v=4" width="42;" alt="秋雨落"/>
+</a>
 <a href="https://github.com/lisheng741" title="芦荟柚子茶">
   <img src="https://avatars.githubusercontent.com/u/53617305?v=4" width="42;" alt="芦荟柚子茶"/>
 </a><!--GAMFC-END-->
@@ -304,8 +318,8 @@ Quick Reference
 
 由于中国国内访问，时常打不开，你可以访问下面镜像网站。推荐我的[镜像网站](https://github.com/jaywcjlove/reference/issues/102#issue-1451649637)
 
-[ecdata.cn](http://ref.ecdata.cn/)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));height: 3rem;-->
+[ecdata.cn](http://ref.ecdata.cn/)<!--rehype:style=background: rgb(16 185 129);height: 3rem;-->
-[mofe.io](http://quickref.mofe.io)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));height: 3rem;-->
+[mofe.io](http://quickref.mofe.io)<!--rehype:style=background: rgb(16 185 129);height: 3rem;-->
 <!--rehype:class=home-card&style=margin:1.2rem 0;display: flex;justify-content: center;-->
 
 如果你有资源，可以很方便部署 web 版，这非常简单，只需要克隆 gh-pages 分支代码到你的静态服务就可以了，还可以使用 [docker](https://hub.docker.com/r/wcjiang/reference) 快捷部署 web 版。

docs/cs.md

@@ -68,7 +68,7 @@ var bo = false;
     用于文档 **/
 ```
 
-### Strings
+### 字符串
 
 ```cs
 string first = "John";
@@ -78,11 +78,11 @@ string name = first + " " + last;
 Console.WriteLine(name); // => John Doe
 ```
 
-查看: [Strings](#c-字符串)
+查看: [C#字符串](#c-字符串)
 
-### User Input
+### 用户输入
 
-```cs
+```cs showLineNumbers
 Console.WriteLine("Enter number:");
 if(int.TryParse(Console.ReadLine(),out int input))
 {
@@ -90,9 +90,8 @@ if(int.TryParse(Console.ReadLine(),out int input))
   Console.WriteLine($"You entered {input}");
 }
 ```
-<!--rehype:className=wrap-text-->
 
-### 条件句
+### 条件判断
 
 ```cs
 int j = 10;
@@ -170,7 +169,7 @@ Console.WriteLine(name); // => John Doe
 
 ### 逐字字符串
 
-```cs
+```cs showLineNumbers
 string longString = @"I can type any characters in here !#@$%^&*()__+ '' \n \t except double quotes and I will be taken literally. I even work with multiple lines.";
 ```
 <!--rehype:className=wrap-text-->
@@ -199,10 +198,7 @@ Console.WriteLine(sb.ToString());
 
 对于频繁拼接字符串的场景（如：成百上千次循环），使用 `System.Text.StringBuilder` 提升性能
 
-<!--rehype:className=wrap-text-->
-
 ### 原始字符串文本
-
 <!--rehype:wrap-class=col-span-2-->
 
 ```cs
@@ -217,18 +213,16 @@ string multiLine = """
 Console.WriteLine(multiLine); // => Content begin "Hello World!" /\n<>"" end.
 ```
 
-<!--rehype:className=wrap-text-->
-
 杂项
 -----------
 
-### 一般 .NET 条款
+### 常用 .NET 概念
-<!--rehype:wrap-class=col-span-2-->
+<!--rehype:wrap-class=col-span-3-->
 
-条款 | 定义
+概念 | 中文名 | 定义
-:- | -
+:- | -|--
-Runtime | 执行给定的已编译代码单元所需的服务集合
+Runtime | 运行时 | 执行给定的已编译代码单元所需的服务集合
-Common Language Runtime (CLR) | 主要定位、加载和托管 .NET 对象。<br/>CLR 还处理内存管理、应用程序托管、线程协调、执行安全检查和其他低级细节
+Common Language Runtime (CLR) | 通用语言运行库 | 主要定位、加载和托管 .NET 对象。<br/>CLR 还处理内存管理、应用程序托管、线程协调、执行安全检查和其他低级细节
-Managed code | 在 `.NET` 运行时编译和运行的代码。 C#/F#/VB 就是例子
+Managed code | 托管代码 | 在 `.NET` 运行时编译和运行的代码。 C#/F#/VB 就是例子
-Unmanaged code | 直接编译为机器代码且不能由 .NET 运行时直接托管的代码。<br/>不包含空闲内存管理、垃圾收集等。从 C/C++ 创建的 DLL 就是示例
+Unmanaged code | 非托管代码 | 直接编译为机器代码且不能由 .NET 运行时直接托管的代码。<br/>不包含空闲内存管理、垃圾收集等。从 C/C++ 创建的 DLL 就是示例
 <!--rehype:className=show-header-->

docs/css.md

@@ -1260,6 +1260,186 @@ li::before {
 }
 ```
 
+CSS 函数
+-----------
+
+### calc()
+
+```css
+width: calc(100% - 80px);
+```
+
+声明 CSS 属性值时执行一些计算
+
+### clamp()
+
+```css
+font-size: clamp(1rem, 10vw, 2rem);
+```
+
+设置随窗口大小改变的字体大小
+
+### attr()
+
+```css
+p:before {
+  content: attr(data-foo) " ";
+}
+```
+
+获取选择到的元素的某一 HTML 属性值
+
+### counter()
+<!--rehype:wrap-class=row-span-2-->
+
+返回一个代表计数器的当前值的字符串
+
+```html
+<ol>
+  <li></li>
+  <li></li>
+  <li></li>
+</ol>
+```
+
+```css
+ol {
+  counter-reset: listCounter;
+}
+li {
+  counter-increment: listCounter;
+}
+li::after {
+  content: "[" counter(listCounter) "] == ["
+    counter(listCounter, upper-roman) "]";
+}
+```
+
+显示
+
+```
+1. [1]==[I]
+2. [2]==[II]
+3. [3]==[III]
+```
+
+### counters()
+
+```css
+ol {
+  counter-reset: count;
+}
+li {
+  counter-increment: count;
+}
+li::marker {
+   content: counters(count, '.', upper-alpha) ') ';
+}
+li::before {
+  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
+}
+```
+
+嵌套计数器，返回表示指定计数器当前值的连接字符串
+
+### env()
+
+```html
+<meta name="viewport" content="... viewport-fit=cover">
+```
+<!--rehype:className=wrap-text-->
+
+---
+
+```css
+body {
+  padding:
+    env(safe-area-inset-top, 20px)
+    env(safe-area-inset-right, 20px)
+    env(safe-area-inset-bottom, 20px)
+    env(safe-area-inset-left, 20px);
+}
+```
+
+用户代理定义的环境变量值插入你的 CSS 中
+
+### fit-content()
+
+```css
+fit-content(200px)
+fit-content(5cm)
+fit-content(30vw)
+fit-content(100ch)
+```
+
+将给定大小夹紧为可用大小
+
+### max()
+
+从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值
+
+```css
+width: max(10vw, 4em, 80px);
+```
+
+例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽
+
+### min()
+
+```css
+width: min(1vw, 4em, 80px);
+```
+
+从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值
+
+### minmax()
+
+```css
+minmax(200px, 1fr)
+minmax(400px, 50%)
+minmax(30%, 300px)
+minmax(100px, max-content)
+minmax(min-content, 400px)
+minmax(max-content, auto)
+minmax(auto, 300px)
+minmax(min-content, auto)
+```
+
+### repeat() 轨道列表的重复片段
+
+```css
+repeat(auto-fill, 250px)
+repeat(auto-fit, 250px)
+repeat(4, 1fr)
+repeat(4, [col-start] 250px [col-end])
+repeat(4, [col-start] 60% [col-end])
+```
+
+定义了一个长宽范围的闭区间
+
+### url()
+
+```css
+background: url("topbanner.png") #00D no-repeat fixed;
+list-style: square url(http://www.example.com/redball.png)
+```
+<!--rehype:className=wrap-text-->
+
+### var()
+
+```css
+:root {
+  --main-bg-color: pink;
+}
+
+body {
+  background-color: var(--main-bg-color);
+}
+```
+<!--rehype:className=wrap-text-->
+
+代替元素中任何属性中的值的任何部分
+
 CSS 技巧
 ------------
 

docs/flutter.md

@@ -0,0 +1,421 @@
+Flutter 备忘清单
+===
+
+包含 Flutter 常用的组件、布局、方法等。初学者的完整快速参考
+
+入门
+---
+
+### macOS 操作系统上安装和配置
+
+```bash
+$ sudo softwareupdate --install-rosetta --agree-to-license
+```
+<!--rehype:className=wrap-text-->
+
+在 [Apple 芯片的 Mac 电脑](https://support.apple.com/zh-cn/HT211814) 上，还需要安装 [Rosetta 2](https://github.com/flutter/website/pull/7119#issuecomment-1124537969) 环境因为 一些辅助工具 仍然需要，通过手动运行上面的命令来安装
+
+#### 获取 Flutter SDK
+
+- 安装包来获取最新的 stable Flutter SDK：
+  - Intel [`flutter_macos_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_3.3.8-stable.zip)
+  - Apple 芯片 [`flutter_macos_arm64_3.3.8-stable.zip`](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.3.8-stable.zip)  
+
+    想要获取到其他版本的安装包，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
+- 将文件解压到目标路径, 比如:
+
+    ```bash
+    $ cd ~/development
+    $ unzip ~/Downloads/flutter_macos_3.3.8-stable.zip
+    ```
+    <!--rehype:className=wrap-text-->
+- 配置 `flutter` 的 PATH 环境变量：
+
+    ```bash
+    $ export PATH="$PATH:`pwd`/flutter/bin"
+    ```
+
+- 运行 `flutter doctor` 命令
+<!--rehype:className=style-timeline-->
+
+### Windows 操作系统上安装和配置
+
+- 点击下方的安装包，获取 stable 发行通道的 Flutter SDK 最新版本：
+  - [flutter_windows_3.3.8-stable.zip](https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.3.8-stable.zip)
+  - 要查看其他发行通道和以往的版本，请参阅 [SDK 版本列表](https://flutter.cn/docs/development/tools/sdk/releases) 页面
+- 将压缩包解压，然后把其中的 `flutter` 目录整个放在你想放置 `Flutter SDK` 的路径中（例如 `C:\src\flutter`）
+- 更新 `path` 环境变量，在开始菜单的搜索功能键入`「env」`，然后选择 `编辑系统环境变量`。在 **`用户变量`** 一栏中，检查是否有 **`Path`** 这个条目：
+  - 如果存在这个条目，以 `;` 分隔已有的内容，加入 `flutter\bin` 目录的完整路径。
+  - 如果不存在的话，在用户环境变量中创建一个新的 Path 变量，然后将 `flutter\bin` 所在的完整路径作为新变量的值
+<!--rehype:className=style-timeline-->
+
+如果你不想安装指定版本的安装包。可以忽略步骤 `1` 和 `2`。从 `GitHub` 上的 `Flutter repo` 获取源代码，并根据需要，切换到指定的分支或标签
+
+```bash
+C:\src>git clone https://github.com/flutter/flutter.git -b stable
+```
+<!--rehype:className=wrap-text-->
+
+基础组件
+---
+
+### Text 样式文本
+
+```dart
+Text("Hello world",
+  textAlign: TextAlign.left,
+);
+
+Text("Hello world! I'm Jack. "*4,
+  maxLines: 1,
+  overflow: TextOverflow.ellipsis,
+);
+
+Text("Hello world",
+  textScaleFactor: 1.5,
+);
+```
+
+### TextStyle 指定文本显示的样式
+
+```dart
+Text("Hello world",
+  style: TextStyle(
+    color: Colors.blue,
+    fontSize: 18.0,
+    height: 1.2,  
+    fontFamily: "Courier",
+    background: Paint()..color=Colors.yellow,
+    decoration:TextDecoration.underline,
+    decorationStyle: TextDecorationStyle.dashed
+  ),
+);
+```
+<!--rehype:className=wrap-text-->
+
+### TextSpan 文本的一个“片段”
+
+```dart
+Text.rich(TextSpan(
+    children: [
+     TextSpan(
+       text: "Home: "
+     ),
+     TextSpan(
+       text: "https://flutter.dev",
+       style: TextStyle(
+         color: Colors.blue
+       ),  
+       recognizer: _tapRecognizer
+     ),
+    ]
+))
+```
+
+### DefaultTextStyle 文本默认样式  
+<!--rehype:wrap-class=row-span-4-->
+
+```dart
+DefaultTextStyle(
+  // 1.设置文本默认样式  
+  style: TextStyle(
+    color:Colors.red,
+    fontSize: 20.0,
+  ),
+  textAlign: TextAlign.start,
+  child: Column(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: <Widget>[
+      Text("hello world"),
+      Text("I am Jack"),
+      Text("I am Jack",
+        style: TextStyle(
+          inherit: false, //2.不继承默认样式
+          color: Colors.grey
+        ),
+      ),
+    ],
+  ),
+);
+```
+<!--rehype:className=wrap-text-->
+
+### 字体设置加载
+<!--rehype:wrap-class=row-span-4-->
+
+- 在 asset 中声明，要先在 `pubspec.yaml` 中声明它
+
+    ```yaml
+    flutter:
+      fonts:
+        - family: Raleway
+          fonts:
+            - asset: assets/fonts/Raleway-Regular.ttf
+            - asset: assets/fonts/Raleway-Medium.ttf
+              weight: 500
+            - asset: assets/fonts/Raleway-SemiBold.ttf
+              weight: 600
+        - family: AbrilFatface
+          fonts:
+            - asset: assets/fonts/abrilfatface/AbrilFatface-Regular.ttf
+    ```
+
+- 将字体文件复制到在 `pubspec.yaml` 中指定的位置
+- 使用字体
+
+    ```dart
+    // 声明文本样式
+    const textStyle = const TextStyle(
+      fontFamily: 'Raleway',
+    );
+    // 使用文本样式
+    var buttonText = const Text(
+      "Use the font for this text",
+      style: textStyle,
+    );
+    ```
+<!--rehype:className=style-timeline-->
+
+### ElevatedButton "漂浮"按钮
+
+```dart
+ElevatedButton(
+  child: Text("normal"),
+  onPressed: () {},
+);
+```
+
+### TextButton 文本按钮
+
+```dart
+TextButton(
+  child: Text("normal"),
+  onPressed: () {},
+)
+```
+
+### OutlineButton 边框阴影且背景透明按钮
+
+```dart
+OutlineButton(
+  child: Text("normal"),
+  onPressed: () {},
+)
+```
+
+### IconButton 可点击的图标按钮
+
+```dart
+IconButton(
+  icon: Icon(Icons.thumb_up),
+  onPressed: () {},
+)
+```
+
+### 带图标的按钮
+
+```dart
+ElevatedButton.icon(
+  icon: Icon(Icons.send),
+  label: Text("发送"),
+  onPressed: _onPressed,
+),
+OutlineButton.icon(
+  icon: Icon(Icons.add),
+  label: Text("添加"),
+  onPressed: _onPressed,
+),
+TextButton.icon(
+  icon: Icon(Icons.info),
+  label: Text("详情"),
+  onPressed: _onPressed,
+),
+```
+
+### 从 asset 中加载图片
+
+- 在工程根目录下创建一个`images目录`，并将图片 `aaa.png` 拷贝到该目录。
+- 在 `pubspec.yaml` 中的 `flutter` 部分添加如下内容：
+
+    ```yaml
+    assets:
+      - images/aaa.png
+    ```
+
+    注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。
+
+- 加载该图片
+
+    ```dart
+    Image(
+      image: AssetImage("images/aaa.png"),
+      width: 100.0
+    );
+    ```
+
+    Image 也提供了一个快捷的构造函数 `Image.asset` 用于从 `asset` 中加载、显示图片：
+
+    ```dart
+    Image.asset("images/aaa.png",
+      width: 100.0,
+    )
+    ```
+<!--rehype:className=style-timeline-->
+
+### 从网络加载图片
+
+```dart
+Image(
+  image: NetworkImage(
+      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
+  width: 100.0,
+)
+```
+<!--rehype:className=wrap-text-->
+
+Image 也提供了一个快捷的构造函数 `Image.network` 用于从网络加载、显示图片：
+
+```dart
+Image.network(
+  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
+  width: 100.0,
+)
+```
+<!--rehype:className=wrap-text-->
+
+### Image 参数
+<!--rehype:wrap-class=row-span-2-->
+
+```dart
+const Image({
+  ...
+  this.width, // 图片的宽
+  this.height, // 图片高度
+  this.color, // 图片的混合色值
+  this.colorBlendMode, // 混合模式
+  this.fit,// 缩放模式
+  // 对齐方式
+  this.alignment = Alignment.center,
+  // 重复方式
+  this.repeat = ImageRepeat.noRepeat,
+  ...
+})
+```
+
+### Switch 单选开关
+
+```dart
+Switch(
+  value: true,//当前状态
+  onChanged:(value){
+    // 重新构建页面  
+  },
+),
+```
+
+### Checkbox 复选框
+<!--rehype:wrap-class=row-span-2-->
+
+```dart
+Checkbox(
+  value: true,
+  // 选中时的颜色
+  activeColor: Colors.red,
+  onChanged:(value){
+    // ...
+  },
+)
+```
+
+### TextField 文本输入框
+
+```dart
+TextField(
+    autofocus: true,
+    onChanged: (v) {
+      print("onChange: $v");
+    }
+)
+```
+
+### LinearProgressIndicator 线性、条状的进度条
+
+模糊进度条(会执行一个动画)
+
+```dart
+LinearProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+),
+```
+<!--rehype:className=wrap-text-->
+
+进度条显示 `50%`
+
+```dart
+LinearProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+  value: .5, 
+)
+```
+<!--rehype:className=wrap-text-->
+
+### CircularProgressIndicator 圆形进度条
+
+模糊进度条(会执行一个旋转动画)
+
+```dart
+CircularProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+),
+```
+<!--rehype:className=wrap-text-->
+
+进度条显示 `50%`，会显示一个半圆
+
+```dart
+CircularProgressIndicator(
+  backgroundColor: Colors.grey[200],
+  valueColor: AlwaysStoppedAnimation(Colors.blue),
+  value: .5,
+),
+```
+<!--rehype:className=wrap-text-->
+
+### 自定义尺寸
+
+线性进度条高度指定为 `3`
+
+```dart
+SizedBox(
+  height: 3,
+  child: LinearProgressIndicator(
+    backgroundColor: Colors.grey[200],
+    valueColor: AlwaysStoppedAnimation(Colors.blue),
+    value: .5,
+  ),
+),
+```
+
+圆形进度条直径指定为 `100`
+
+```dart
+SizedBox(
+  height: 100,
+  width: 100,
+  child: CircularProgressIndicator(
+    backgroundColor: Colors.grey[200],
+    valueColor: AlwaysStoppedAnimation(Colors.blue),
+    value: .7,
+  ),
+),
+```
+
+另见
+---
+
+- [Dart 备忘清单](./dart.md) _(jaywcjlove.github.io)_
+- [flutter 官网](https://flutter.dev) _(flutter.dev)_
+- [flutter 中文开发者社区](https://flutterchina.club/) _(flutterchina.club)_

docs/git.md

@@ -928,7 +928,59 @@ Host github.com
 ```
 <!--rehype:className=wrap-text-->
 
+Conventional Commmits
+----
+
+### 格式
+<!--rehype:wrap-class=col-span-3-->
+
+```text
+<type>(<scope>): <short summary>
+  │       │             │
+  │       │             └─⫸ 紧凑简短的描述，无需大写，也不需要用句号结尾
+  │       │
+  │       └─⫸ Commit 范围: animations|bazel|benchpress|common|compiler|compiler-cli|core|
+  │                          elements|forms|http|language-service|localize|platform-browser|
+  │                          platform-browser-dynamic|platform-server|router|service-worker|
+  │                          upgrade|zone.js|packaging|changelog|docs-infra|migrations|ngcc|ve|
+  │                          devtools....
+  │
+  └─⫸ Commit 类型: build|ci|doc|docs|feat|fix|perf|refactor|test
+                    website|chore|style|type|revert
+```
+
+### 常用
+<!--rehype:wrap-class=row-span-1-->
+
+|   类型   |  描述 |
+| ----------|------------ |
+| `feat:`   | 新特性     |
+| `fix(scope):`   | 修复 scope 中的 Bug |
+| `feat!:` / `feat(scope)!:` | breaking change /  重构 API |
+| `chore(deps):` | 更新依赖 |
+<!--rehype:className=left-align-->
+
+### Commit 类型
+<!--rehype:wrap-class=col-span-2-->
+
+|   类型   |  描述 |
+| ----------|------------ |
+| `build:` | 变更影响的是**构建系统**或者**外部依赖** (如: gulp, npm) |
+| `ci:` | 修改了 CI 配置文件或脚本 (如: Github Action, Travis) |
+| `chore:` | **【重要】** 变更不影响源代码或测试（如更新了辅助工具、库等) |
+| `docs:` | 只修改了文档 |
+| `feat:` | **【重要】** 一个新特性 |
+| `fix:` | **【重要】** 修复了一个 Bug |
+| `perf:` | 增强性能的代码变更 |
+| `refactor:` | 并非修复 Bug 或添加新特性的代码变更 |
+| `revert:` | 回退代码 |
+| `style:` | 变更不影响一些有意义的代码 (如: 删除空格、格式化代码、添加分号等) |
+| `test:` | 添加测试代码或修正已有的测试 |
+<!--rehype:className=left-align-->
+
 另见
 ---
 
 - [最常用的 git 提示和技巧](https://github.com/git-tips/tips)
+- [Conventional Commits 官方网站](https://www.conventionalcommits.org/zh-hans/v1.0.0/) _(conventionalcommits.org)_
+- [Conventional Commits Cheatsheet](https://gist.github.com/Zekfad/f51cb06ac76e2457f11c80ed705c95a3) _(gist.github.com)_

docs/golang.md

@@ -401,7 +401,7 @@ for _, num := range nums {
 fmt.Println("sum:", sum)
 ```
 
-### While 循环
+### For 循环
 
 ```go
 i := 1

docs/homebrew.md

@@ -77,7 +77,7 @@ Cask 命令用于与图形应用程序交互
 `brew upgrade`  | 升级所有软件包
 `brew list`     | 已安装列表
 `brew outdated` | 升级需要什么？
-`brew doctor`   | 诊断冲泡问题
+`brew doctor`   | 诊断 brew 问题
 `brew pin <formula>` | 防止指定软件包升级
 `brew unpin <formula>` | 允许升级指定的软件包
 
@@ -86,11 +86,14 @@ Cask 命令用于与图形应用程序交互
 ```bash
 $ brew cleanup # 删除旧版本的已安装软件包
 $ brew cleanup <formula> # 删除旧版本指定软件包
+$ brew cleanup -s # 删除未安装的软件包
+$ brew cleanup --prune=all # 删除所有 Homebrew 缓存
+$ rm -rf $(brew --cache) # 直接删除 Homebrew 的缓存目录
 # 显示所有将被删除的软件包(试运行)
 $ brew cleanup -n
 ```
 
-### brew 源码仓库
+### Brew 源码仓库
 
 ```bash
 # 列出所有当前点击的源码仓库（点击）
@@ -111,7 +114,7 @@ $ brew untap <user/repo>
 $ brew list
 # 显示所有本地可用的 brew 配方
 $ brew search
-# 对用于 brew 的软件包名称执行子字符串搜索
+# 搜索包含指定字符的 brew 配方
 $ brew search <text>
 # 显示有关软件包的信息
 $ brew info <formula>

docs/markdown.md

@@ -159,7 +159,7 @@ console.log("This is a block code")
 
 ```markdown
 | 左栏     | 中间栏   | 右栏  |
-| ----------| ------------ | --------- |
+| -------- | -------- | ----- |
 | 单元格 1 | 居中     | $1600 |
 | 单元格 2 | 单元格 3 | $12   |
 ```
@@ -167,12 +167,20 @@ console.log("This is a block code")
 简单的风格
 
 ```markdown
- 左栏 | 中间栏 | 右栏
+左栏     | 中间栏   | 右栏  
-:-------: | :-------:|:-------:
+-------- | -------- | -----
 单元格 1 | 居中     | $1600
 单元格 2 | 单元格 3 | $12 
 ```
 
+增加 `:` 改变文字对齐方式
+
+```markdown
+左栏     |  中间栏  |   右栏 
+:------- | :------: | -----: 
+左对齐   |   居中   | 右对齐
+```
+
 Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 
 ### 脚注 (Footnotes)
@@ -222,18 +230,18 @@ Markdown 表格生成器：[tableconvert.com](https://tableconvert.com/)
 
 | 字符 | 转义 | 描述 |
 |------------|--------|-------------|
-| \\         | \\\\   | backslash 反斜杠             |
+| <pur>\\</pur>         | \\\\   | backslash 反斜杠             |
-| \`         | \\\`   | backtick 反引号              |
+| <pur>\`</pur>         | \\\`   | backtick 反引号              |
-| \*         | \\\*   | asterisk 星号                |
+| <pur>\*</pur>         | \\\*   | asterisk 星号                |
-| \_         | \\\_   | underscore 下划线            |
+| <pur>\_</pur>         | \\\_   | underscore 下划线            |
-| \{\}       | \\\{\} | curly braces 花括号          |
+| <pur>\{\}</pur>       | \\\{\} | curly braces 花括号          |
-| \[\]       | \\\[\] | square brackets 方括号       |
+| <pur>\[\]</pur>       | \\\[\] | square brackets 方括号       |
-| \(\)       | \\\(\) | parentheses 圆括号           |
+| <pur>\(\)</pur>       | \\\(\) | parentheses 圆括号           |
-| \#         | \\\#   | hash mark 哈希标记           |
+| <pur>\#</pur>         | \\\#   | hash mark 哈希标记           |
-| \+         | \\\+   | plus sign 加号               |
+| <pur>\+</pur>         | \\\+   | plus sign 加号               |
-| \-         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
+| <pur>\-</pur>         | \\\-   | minus sign \(hyphen\) 减号(连字符) |
-| \.         | \\\.   | dot 点                      |
+| <pur>\.</pur>         | \\\.   | dot 点                      |
-| \!         | \\\!   | exclamation mark 感叹号      |
+| <pur>\!</pur>         | \\\!   | exclamation mark 感叹号      |
 
 ### 行内 HTML 元素
 <!--rehype:wrap-class=col-span-2-->

docs/mitmproxy.md

@@ -0,0 +1,282 @@
+Mitmproxy 备忘清单
+====
+
+[Mitmproxy](https://mitmproxy.org/) 是一个免费开源的交互式 HTTPS 代理。这是 mitmproxy 的快速参考备忘单。
+
+入门
+-----
+
+### 使用
+<!--rehype:wrap-class=col-span-2-->
+
+选项 | 范例 | 描述
+:--|--|--
+`-p`   | mitmproxy -p 8001                                  | 在端口 `8001` 上启动代理
+`-m`   | mitmproxy -p 8001 -m reverse:<http://127.0.0.1:4000> | `8001` 端口反向代理到4000端口
+`-w`   | mitmproxy -p 8001 -w traffic.mitm                  | 流到达时流向文件
+`-r`   | mitmproxy -r traffic.mitm                          | 从文件中读取流
+`-C`   | mitmproxy -C traffic.mitm                          | 从保存的文件重放客户端请求
+`-S`   | mitmproxy -S traffic.mitm                          | 从保存的文件重放服务器响应
+`-s`   | mitmproxy -s myScript.py                           | 执行脚本
+`-h`   | mitmproxy -h                                       | `mitmproxy` 快速帮助
+
+### 移动
+
+```markdown
+        k                 Ctrl b
+        ▲                   ▲▲
+        │                   ││
+h ◀ ─── + ─── ▶ l           ││ page
+        │                   ││
+        ▼                   ▼▼
+        j             Ctrl f / Space 
+```
+
+---
+
+:---|---
+:---|---
+`h`, `j`, `k` ,`l`   | 左、下、上、右
+`Ctrl` `b`           | 向上翻页
+`Space` / `Ctrl` `f` | 向下翻页
+`g` / `G`            | 转到开头/结尾
+`Arrows`             | 上下左右
+<!--rehype:className=shortcuts-->
+
+### 安装
+
+- [mitmproxy 文档](https://docs.mitmproxy.org/stable/) _(mitmproxy.org)_
+- [mitmproxy 开源仓库](https://github.com/mitmproxy/mitmproxy) _(github.com)_
+
+---
+
+```bash
+$ brew install mitmproxy # macOS
+```
+
+### 代理模式
+
+Argument | Effect
+:-- | --
+`-R REVERSE_PROXY`, `--reverse REVERSE_PROXY` | 将所有请求转发到上游 HTTP 服务器：`http[s]://host[:port]`。客户端始终可以通过 `HTTPS` 和 `HTTP` 进行连接，与服务器的连接由指定的方案决定
+`--socks` | 设置 `SOCKS5` 代理模式
+`-T`, `--transparent` | 设置透明代理模式
+`-U UPSTREAM_PROXY`, `--upstream UPSTREAM_PROXY` | 将所有请求转发到上游代理服务器：`http://host[:port]`
+<!--rehype:className=style-list-->
+
+### 流（视图）
+<!--rehype:wrap-class=row-span-2-->
+
+:---|---
+:---|---
+`A`        | 恢复所有拦截的流
+`D`        | 重复流
+`F`        | 设置焦点跟随
+`L`        | 从文件加载流
+`M`        | 切换查看标记流
+`S`        | 开始服务器回放
+`U`        | 取消设置所有标记
+`V`        | 还原对此流的更改
+`X`        | 杀死这个流
+`Z`        | 清除所有未显示的流
+`a`        | 恢复此拦截流
+`b`        | 将响应主体保存到文件
+`d`        | 从视图中删除流
+`e`        | 将此流导出到文件
+`f`        | 设置视图过滤器
+`m`        | 在此流程上切换标记
+`n`        | 创建新流程
+`o`        | 设置流列表顺序
+`r`        | 重播此流程
+`v`        | 反向流列表顺序
+`w`        | 将列出的流程保存到文件
+`\|`       | 在此流上运行脚本
+`Ctrl` `l` | 将剪辑发送到剪贴板
+<!--rehype:className=shortcuts-->
+
+### 常见的快捷键
+
+:---|---
+:---|---
+`q`     | 返回/退出
+`z`     | 清除流列表
+`:`     | 命令提示符
+`E`     | 查看事件日志
+`O`     | 查看选项
+`r`     | 重播此流程
+`Tab`   | 下一个
+`Enter` | 选择
+<!--rehype:className=shortcuts-->
+
+### 全局键绑定
+
+:---|---
+:---|---
+`-`            | 循环到下一个布局
+`?`            | 查看帮助
+`B`            | 启动附加的浏览器
+`C`            | 查看命令
+`I`            | 切换拦截
+`K`            | 查看按键绑定
+`P`            | 查看流程详细信息
+`Q`            | 立即退出
+`W`            | 流式传输到文件
+`i`            | 设置拦截
+`Ctrl` `right` | 聚焦下一个布局窗格
+`Shift` `tab`  | 聚焦下一个布局窗格
+<!--rehype:className=shortcuts-->
+
+### 代理选项
+<!--rehype:wrap-class=col-span-2-->
+
+:---|---
+:---|---
+`-b ADDR`, `--bind-address ADDR` | 将代理绑定到的地址（默认为所有接口）
+`-I HOST`, `--ignore HOST` | 忽略主机并转发所有流量而不对其进行处理。在透明模式下，建议使用 IP 地址（范围），而不是主机名。在常规模式下，仅忽略 SSL 流量并应使用主机名。提供的值被解释为正则表达式并匹配 ip 或主机名。可以多次通过
+`--tcp HOST` | 与模式匹配的所有主机的通用 TCP SSL 代理模式。类似于 `--ignore`，但 SSL 连接被拦截。通信内容以详细模式打印到日志中
+`-n`, `--no-server` | 不要启动代理服务器。用于离线分析以前捕获的流
+`-p PORT`, `--port PORT` | 代理服务端口。默认值：`8080`
+`--http2`, `--no-http2` | 显式启用/禁用 `HTTP/2` 支持。默认情况下禁用，直到主要网站正确实施规范。默认值将在未来版本中更改
+`--no-websocket`, `--websocket` | 显式启用/禁用 `WebSocket` 支持。默认启用
+`--raw-tcp`, `--no-raw-tcp` | 显式启用/禁用实验性原始 `TCP` 支持。默认情况下禁用。默认值将在未来版本中更改
+`--spoof-source-address` | 使用客户端的 IP 进行服务器端连接。与 `–upstream-bind-address` 结合使用以欺骗固定源地址
+`--upstream-bind-address UPSTREAM_BIND_ADDRESS` | 将上游请求绑定到的地址（默认为无）
+<!--rehype:className=style-list-->
+
+Mitmproxy 过滤器
+---------------
+
+### 过滤器
+
+:---|---
+:---|---
+`f` | 设置视图过滤器 _(在流视图页面上)_
+<!--rehype:className=shortcuts-->
+
+---
+
+- [RegEX 备忘清单](./regex.md) _(jaywcjlove.github.io)_
+
+正则表达式是 Python 风格的，可以指定为带引号的字符串
+
+### 运算符
+
+:---|---
+:---|---
+`!`     | 一元非
+`&`     | 和
+`\|`     | 或者
+`(...)` | 分组
+
+### 表达式
+<!--rehype:wrap-class=row-span-2-->
+
+:---|---
+:---|---
+`~a`           | 响应匹配资源：CSS、Javascript、Flash、图像。
+`~b` `regex`   | 主体 Body
+`~bq` `regex`  | 请求正文
+`~bs` `regex`  | 响应体
+`~c` `int`     | HTTP 响应代码
+`~d` `regex`   | 域
+`~dst` `regex` | 匹配目标地址
+`~e`           | 匹配错误
+`~h` `regex`   | 标头
+`~hq` `regex`  | 请求头
+`~hs` `regex`  | 响应头
+`~http`        | 匹配 HTTP 流
+`~m` `regex`   | 方法
+`~marked`      | 匹配标记流
+`~q`           | 匹配请求无响应
+`~s`           | 匹配响应
+`~src` `regex` | 匹配源地址
+`~t` `regex`   | 内容类型标头
+`~tcp`         | 匹配 TCP 流
+`~tq` `regex`  | 请求 Content-Type 标头
+`~ts` `regex`  | 响应内容类型标头
+`~u` `regex`   | 网址
+`~websocket`   | 匹配 WebSocket 流（和 HTTP-WebSocket 握手流）
+
+### 流选择器
+
+表达式
+
+:---|---
+:---|---
+`@all` | 所有流程
+`@focus` | 目前关注的流程
+`@shown` | 当前显示的所有流程
+`@hidden` | 当前隐藏的所有流程
+`@marked` | 所有标记流
+`@unmarked` | 所有未标记的流
+
+mitmproxy 有一组方便的流选择器，可以在当前视图上操作
+
+### 示例
+
+包含“google.com”的网址
+
+```
+google\.com
+```
+
+正文中包含字符串“test”的请求
+
+```
+~q ~b test
+```
+
+除了带有 text/html 内容类型的请求之外的任何内容：
+
+```
+!(~q & ~t "text/html")
+```
+
+替换请求中的整个 GET 字符串（需要引号才能使其工作）：
+
+```
+":~q ~m GET:.*:/replacement.html"
+```
+
+Mitmproxy 脚本
+-------
+<!--rehype:body-class=cols-2-->
+
+### Custom response
+
+```python
+from mitmproxy import http
+def request(flow: http.HTTPFlow) -> None:
+    if flow.request.pretty_url == "http://example.com/path":
+        flow.response = http.HTTPResponse.make(
+            200,  # (optional) status code
+            b"Hello World",  # (optional) content
+            {"Content-Type": "text/html"}  # (optional) headers
+        )
+```
+
+从代理发送回复而不向远程服务器发送任何数据
+
+### Add header
+
+```python
+class AddHeader:
+    def __init__(self):
+        self.num = 0
+    def response(self, flow):
+        self.num = self.num + 1
+        flow.response.headers["count"] = str(self.num)
+addons = [
+    AddHeader()
+]
+```
+
+为每个响应添加一个 HTTP 标头
+
+另见
+-------
+
+- [mitmproxy addons](https://github.com/mitmproxy/mitmproxy/tree/master/examples/addons) _(github.com)_
+- [mitmproxy 文档](https://docs.mitmproxy.org/stable/) _(mitmproxy.org)_
+- [mitmproxy 开源仓库](https://github.com/mitmproxy/mitmproxy) _(github.com)_
+- [mitmproxy 备忘清单](https://www.stut-it.net/blog/2017/mitmproxy-cheatsheet.html) _(stut-it.net)_

docs/nestjs.md

@@ -0,0 +1,117 @@
+NestJS 备忘清单
+===
+
+[NestJS](https://docs.nestjs.com/) 是一个用于构建高效、可扩展的 Node.js 服务器端应用程序的开发框架
+
+创建应用
+---
+
+### NestCLI
+
+[NestJS](https://docs.nestjs.com/) 需要 [Node.js >= 12](https://nodejs.org)
+
+```bash
+$ npm i -g @nestjs/cli
+$ nest new project-name
+```
+
+[Nest CLI](https://docs.nestjs.com/cli/overview) 是一个命令行界面工具，可以帮助你初始化、开发和维护你的Nest应用程序，安装依赖并启动开发服务器
+
+```bash
+$ cd <your-project-name>
+$ npm run start
+```
+
+当你准备将应用发布到生产环境时，请运行：
+
+```bash
+$ npm run build
+```
+
+此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本
+
+### CLI指令
+
+命令 | 别名 | 描述
+:-|-|-
+`new` | n | 使用模板快速创建应用
+`generate` | g | 自动生成`Controller`、`Providers` 和 `Modules`
+`build` | | 打包并输出./dist目录
+`start` | | 打包并运行
+`add`   | | 安装一个符合Nest的库，同`npm install`
+`info`  | i | 输出系统信息、CLI版本和Nest Package信息
+<!--rehype:className=show-header left-align-->
+
+### Platform(平台)
+<!--rehype:wrap-class=row-span-2-->
+
+目前 `NestJS` 支持两个 `Node HTTP` 平台：[Express](https://expressjs.com/) 和 [Fastify](https://www.fastify.io/)。从技术上讲，一旦创建了适配器，Nest 便可以使用任何 Node HTTP 框架
+
+#### platform-express
+
+```ts
+import { NestFactory } from '@nestjs/core'
+import { AppModule } from './app.module'
+import { NestExpressApplication } from '@nestjs/platform-express'
+
+async function bootstrap() {
+  const app = await NestFactory.create<NestExpressApplication>(AppModule)
+  await app.listen(3000)
+}
+bootstrap()
+```
+<!--rehype:className=wrap-text-->
+
+#### platform-fastify
+
+```ts
+import { NestFactory } from '@nestjs/core'
+import { AppModule } from './app.module'
+import { NestFastifyApplication } from '@nestjs/platform-fastify'
+
+async function bootstrap() {
+  const app = await NestFactory.create<NestFastifyApplication>(AppModule)
+  app.enableCors() // 开启Cors
+  app.register(fastifyCsrf)
+  await app.listen(4000, '0.0.0.0')
+  
+  console.log(`Application is running on: ${await app.getUrl()}`)
+}
+bootstrap()
+```
+<!--rehype:className=wrap-text-->
+
+### 目录
+
+```bash
+├── src      # 源代码目录
+│   ├── app.module.ts          # 应用程序的根模块
+│   ├── app.controller.spec.ts # 控制器的单元测试
+│   ├── app.controller.ts      # 单个路由的基本控制器
+│   ├── app.service.ts         # 具有单一方法的基本服务
+│   └── main.ts # 应用程序的入口文件
+│               # 它使用核心函数 NestFactory 来创建 Nest 应用程序的实例
+└── test      # 测试目录
+    ├── app.e2e-spec.ts
+    └── jest-e2e.json
+```
+
+### JavaScript
+
+`NestCLI` 默认是使用`TypeScript`进行初始化项目的，如果需要使用`JavaScript`请使用以下指令
+
+```bash
+$ git clone https://github.com/nestjs/javascript-starter.git
+
+$ cd <javascript-starter>
+$ npm install
+$ npm run start
+```
+<!--rehype:className=wrap-text-->
+
+需要[注意]((https://docs.nestjs.com/first-steps#language))的一点是，`JavaScript`的版本是需要`Babel`的
+
+另见
+---
+
+[NestJs 官方文档](https://docs.nestjs.com/)

docs/quickreference.md

@@ -37,9 +37,9 @@ npm run start # 监听 md 文件编译输出 HTML
 ├── CONTRIBUTING.md   # 贡献说明
 ├── Dockerfile
 ├── LICENSE
-├── README.md   # Home(首页) 内容
+├── README.md  # 🌐 Home(首页)内容
-├── dist        # 编译后的静态资源目录
+├── dist       # 📦 编译后的静态资源目录
-├── docs        # Markdown 文档（速查表）
+├── docs       # 👈 Markdown 文档(速查表)
 │   ├── bash.md
 │   ├── ....
 │   └── yaml.md
@@ -433,17 +433,20 @@ H2 部分
 ### 卡片 3 (H3 部分)
 ```
 
-类 | 说明
+---
----- | ----
+
+:-- | --
+:-- | --
+合并 **列** 布局 |
 `col-span-2` | `2` 列占位
 `col-span-3` | `3` 列占位
 `col-span-4` | `4` 列占位
-`col-span-5` | `5` 列占位
+`col-span-{2~10}` | `{2~10}` 列占位
+合并 **行** 布局 |
 `row-span-2` | `2` 行占位
 `row-span-3` | `3` 行占位
 `row-span-4` | `4` 行占位
-`row-span-5` | `5` 行占位
+`row-span-{2~10}` | `{2~10}` 行占位
-<!--rehype:className=show-header -->
 
 ### 卡片合并行布局 1
 
@@ -762,7 +765,7 @@ H2 部分
 列表
 ---
 
-### 一栏（默认）
+### 一栏(默认)
 
 - Item 1
 - Item 2
@@ -881,7 +884,7 @@ H3 部分 - 占位效果展示
 <!--rehype:wrap-class=row-span-2-->
 
 ```
-...
+...合并两行
 ```
 
 `<!--rehype:wrap-class=row-span-2-->`
@@ -890,7 +893,7 @@ H3 部分 - 占位效果展示
 <!--rehype:wrap-class=col-span-2-->
 
 ```
-...
+...合并两列
 ```
 
 `<!--rehype:wrap-class=col-span-2-->`
@@ -899,7 +902,7 @@ H3 部分 - 占位效果展示
 <!--rehype:style=background:#e91e63;-->
 
 ```
-...
+...红色标题配置
 ```
 
 `<!--rehype:style=background:#e91e63;-->`
@@ -908,7 +911,7 @@ H3 部分 - 占位效果展示
 <!--rehype:style=background:#d7a100;-->
 
 ```
-...
+...黄色标题配置
 ```
 
 `<!--rehype:style=background:#d7a100;-->`

docs/vue.md

@@ -64,11 +64,14 @@ $ npm run build
 <!--rehype:wrap-class=row-span-2-->
 
 ```js
-import { createApp } from 'vue'
+import { createApp, ref } from 'vue'
 
 const app = createApp({
-  data() {
+  setup() {
-    return { count: 0 }
+    const message = ref("Hello Vue3")
+    return {
+      message
+    }
   }
 })
 app.mount('#app')
@@ -90,11 +93,12 @@ app.mount('#app')
 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <div id="app">{{ message }}</div>
 <script>
-  const { createApp } = Vue
+  const { createApp, ref } = Vue
   createApp({
-    data() {
+    setup() {
+      const message = ref("Hello Vue3")
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
@@ -105,13 +109,14 @@ app.mount('#app')
 ### 使用 ES 模块构建版本
 
 ```html
-<div id="app">{{ message }}</div>
+<div id="app">{{ message, ref }}</div>
 <script type="module">
-  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
+  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
   createApp({
-    data() {
+    setup() {
+      const message = ref("Hello Vue3")
       return {
-        message: 'Hello Vue!'
+        message
       }
     }
   }).mount('#app')
@@ -164,21 +169,28 @@ app.mount('#app')
 ### 动态绑定多个值
 <!--rehype:wrap-class=row-span-2-->
 
-```js
-data() {
-  return {
-    objectOfAttrs: {
-      id: 'container',
-      class: 'wrapper'
-    }
-  }
-}
-```
-
 通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上
 
 ```html
-<div v-bind="objectOfAttrs"></div>
+<script setup>
+  import comp from "./Comp.vue"
+  import {ref} from "vue"
+  const a = ref("hello")
+  const b = ref("world")
+</script>
+
+<template>
+  <comp v-bind="{a, b}"></comp>
+</template>
+```
+
+如果你是使用的 `setup` 语法糖。需要使用 `defineprops` 声名（可以直接使用`a`/`b`）
+
+```js
+const props = defineProps({
+  a: String,
+  b: String
+})
 ```
 
 ### 使用 JavaScript 表达式
@@ -286,7 +298,7 @@ import { defineComponent, reactive } from 'vue';
 
 // `defineComponent`用于IDE推导类型
 export default defineComponent({
-  // `setup` 是一个专门用于组合式 API 的特殊钩子函数
+  // setup 用于组合式 API 的特殊钩子函数
   setup() {
     const state = reactive({ count: 0 });
 
@@ -297,6 +309,7 @@ export default defineComponent({
   },
 });
 ```
+<!--rehype:className=wrap-text-->
 
 ### 声明方法
 
@@ -327,6 +340,7 @@ export default defineComponent({
   },
 })
 ```
+<!--rehype:className=wrap-text-->
 
 ### `<script setup>` setup语法糖
 
@@ -351,29 +365,27 @@ function increment() {
 **`setup`** 语法糖用于简化代码，尤其是当需要暴露的状态和方法越来越多时
 
 ### 用 `ref()` 定义响应式变量
+<!--rehype:wrap-class=row-span-2-->
+
+`reactive`只能用于对象、数组和 `Map`、`Set` 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
 
 ```js
-// `reactive`只能用于对象、数组和 Map、Set 这样的集合类型，对 string、number 和 boolean 这样的原始类型则需要使用`ref`
 import { ref } from 'vue';
 
 const count = ref(0);
 
 console.log(count); // { value: 0 }
 console.log(count.value); // 0
-
 count.value++;
 console.log(count.value); // 1
-
 const objectRef = ref({ count: 0 });
 
 // 这是响应式的替换
 objectRef.value = { count: 1 };
-
 const obj = {
   foo: ref(1),
   bar: ref(2)
 };
-
 // 该函数接收一个 ref
 // 需要通过 .value 取值
 // 但它会保持响应性
@@ -383,8 +395,9 @@ callSomeFunction(obj.foo);
 const { foo, bar } = obj;
 ```
 
+在 html 模板中不需要带 `.value` 就可以使用
+
 ```html
-<!-- PS: 在html模板中不需要带.value就可以使用 -->
 <script setup>
 import { ref } from 'vue';
 
@@ -399,6 +412,7 @@ const count = ref(0);
 ```
 
 ### 有状态方法
+<!--rehype:wrap-class=col-span-2-->
 
 ```js
 import { reactive, defineComponent, onUnmounted } from 'vue';
@@ -423,8 +437,9 @@ export default defineComponent({
 ```
 
 ### 响应式样式
+<!--rehype:wrap-class=col-span-2-->
 
-```js
+```html
 <script setup>
 import { ref } from 'vue'
 const open = ref(false);
@@ -444,12 +459,13 @@ const open = ref(false);
 </style>
 ```
 
-响应式进阶 —— watch和computed
+响应式进阶 —— watch 和 computed
 ---
 
 ### 监听状态
+<!--rehype:wrap-class=row-span-2-->
 
-```js
+```html
 <script setup>
 import { ref, watch } from 'vue';
 
@@ -469,11 +485,14 @@ watch(count, function() {
   <button @click="increment">
     {{ count }}
   </button>
-  <p>is event: {{ isEvent ? 'yes' : 'no' }}</p>
+  <p>
+    is event: {{ isEvent ? 'yes' : 'no' }}
+  </p>
 </template>
 ```
 
 ### 立即监听状态
+<!--rehype:wrap-class=col-span-2-->
 
 ```js
 watch(count, function() {
@@ -483,15 +502,16 @@ watch(count, function() {
   immediate: true
 })
 ```
+<!--rehype:className=wrap-text-->
 
 ### 计算状态
+<!--rehype:wrap-class=col-span-2-->
 
-```js
+```html
 <script setup>
 import { ref, computed } from 'vue';
 
 const text = ref('')
-
 // computed 的回调函数里，会根据已有并用到的状态计算出新的状态
 const capital = computed(function(){
   return text.value.toUpperCase();
@@ -509,11 +529,12 @@ const capital = computed(function(){
 
 ### defineProps
 
-```js
+```html
 <script setup>
 import { defineProps } from 'vue';
 
-// 这里可以将 `username` 解构出来，但是一旦解构出来再使用，就不具备响应式能力
+// 这里可以将 `username` 解构出来，
+// 但是一旦解构出来再使用，就不具备响应式能力
 defineProps({
   username: String
 })
@@ -526,7 +547,7 @@ defineProps({
 
 子组件定义需要的参数
 
-```js
+```html
 <script setup>
 const username = 'vue'
 </script>
@@ -540,14 +561,12 @@ const username = 'vue'
 
 ### defineEmits
 
-```js
+```html
 <script setup>
 import { defineEmits, ref } from 'vue';
 
 const emit = defineEmits(['search'])
-  
 const keyword = ref('')
-
 const onSearch = function() {
   emit('search', keyword.value)
 }
@@ -561,7 +580,7 @@ const onSearch = function() {
 
 子组件定义支持 `emit` 的函数
 
-```js
+```html
 <script setup>
 const onSearch = function(keyword){
   console.log(keyword)
@@ -577,12 +596,11 @@ const onSearch = function(keyword){
 
 ### defineExpose
 
-```js
+```html
 <script setup>
 import { defineExpose, ref } from 'vue';
 
 const keyword = ref('')
-
 const onSearch = function() {
   console.log(keyword.value)
 }
@@ -597,13 +615,12 @@ defineExpose({ onSearch })
 
 子组件对父组件暴露方法
 
-```js
+```html
 <script setup>
 import { ref } from 'vue'  
 
 const childrenRef = ref(null)
-
+const onSearch = function() {
-const onSearch = function(){
   childrenRef.value.onSearch()
 }
 </script>
@@ -619,13 +636,15 @@ const onSearch = function(){
 ### Provide / Inject
 
 ```ts
-// types
 import type { InjectionKey, Ref } from 'vue'
 
 export const ProvideKey = Symbol() as InjectionKey<Ref<string>>
 ```
+<!--rehype:className=wrap-text-->
 
-```ts
+在应用中使用 `ProvideKey`
+
+```html
 <script setup lang="ts">
 import { provide, ref } from 'vue'
 import { ProvideKey } from './types'
@@ -683,8 +702,10 @@ API 参考
 `app.config.compilerOptions` | 配置运行时编译器的选项 [#](https://cn.vuejs.org/api/application.html#app-config-compileroptions)
 `app.config.globalProperties` | 注册全局属性对象 [#](https://cn.vuejs.org/api/application.html#app-config-globalproperties)
 `app.config.optionMergeStrategies` | 定义自定义组件选项的合并策略的对象 [#](https://cn.vuejs.org/api/application.html#app-config-optionmergestrategies)
+<!--rehype:className=style-list-->
 
 ### 全局 API - 通用
+<!--rehype:wrap-class=row-span-2-->
 
 :- | :-
 :- | :-
@@ -692,7 +713,8 @@ API 参考
 `nextTick()` | 等待下一次 DOM 更新后执行回调 [#](https://cn.vuejs.org/api/general.html#nexttick)
 `defineComponent()` | 在定义 Vue 组件时提供类型推导的辅助函数 [#](https://cn.vuejs.org/api/general.html#definecomponent)
 `defineAsyncComponent()` | 定义一个异步组件 [#](https://cn.vuejs.org/api/general.html#defineasynccomponent)
-`defineCustomElement()` | [#](https://cn.vuejs.org/api/general.html#definecustomelement)
+`defineCustomElement()` | 和 `defineComponent` 接受的参数相同，不同的是会返回一个原生自定义元素类的构造器 [#](https://cn.vuejs.org/api/general.html#definecustomelement)
+<!--rehype:className=style-list-->
 
 ### 组合式 API - setup()
 
@@ -703,20 +725,14 @@ API 参考
 `Setup 上下文` | [#](https://cn.vuejs.org/api/composition-api-setup.html#setup-context)
 `与渲染函数一起使用` | [#](https://cn.vuejs.org/api/composition-api-setup.html#usage-with-render-functions)
 
-### 组合式 API - 响应式: 工具
+### 组合式 API - 依赖注入
 
 :- | :-
 :- | :-
-`isRef()` | 判断是否为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#isref)
+`provide()` | 提供一个可以被后代组件中注入使用的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide)
-`unref()` | 是 ref，返回内部值，否则返回参数本身 [#](https://cn.vuejs.org/api/reactivity-utilities.html#unref)
+`inject()` | 注入一个由祖先组件提供的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject)
-`toRef()` | 创建一个属性对应的 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#toref)
-`toRefs()` | 将对象上的每一个可枚举属性转换为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#torefs)
-`isProxy()` | 检查一个对象是否是由 `reactive()`、`readonly()`、`shallowReactive()` 或 `shallowReadonly()` 创建的代理 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isproxy)
-`isReactive()` | 检查一个对象是否是由 `reactive()` 或 `shallowReactive()` 创建的代理。  [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreactive)
-`isReadonly()` | 检查传入的值是否为只读对象 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly)
 
 ### 组合式 API - 生命周期钩子
-<!--rehype:wrap-class=row-span-3-->
 
 :- | :-
 :- | :-
@@ -734,12 +750,18 @@ API 参考
 `onServerPrefetch()` | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/composition-api-lifecycle.html#onserverprefetch)
 <!--rehype:className=style-list-->
 
-### 组合式 API - 依赖注入
+### 组合式 API - 响应式: 工具
 
 :- | :-
 :- | :-
-`provide()` | 提供一个可以被后代组件中注入使用的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#provide)
+`isRef()` | 判断是否为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#isref)
-`inject()` | 注入一个由祖先组件提供的值 [#](https://cn.vuejs.org/api/composition-api-dependency-injection.html#inject)
+`unref()` | 是 ref，返回内部值，否则返回参数本身 [#](https://cn.vuejs.org/api/reactivity-utilities.html#unref)
+`toRef()` | 创建一个属性对应的 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#toref)
+`toRefs()` | 将对象上的每一个可枚举属性转换为 ref [#](https://cn.vuejs.org/api/reactivity-utilities.html#torefs)
+`isProxy()` | 检查一个对象是否是由 `reactive()`、`readonly()`、`shallowReactive()` 或 `shallowReadonly()` 创建的代理 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isproxy)
+`isReactive()` | 检查一个对象是否是由 `reactive()` 或 `shallowReactive()` 创建的代理。  [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreactive)
+`isReadonly()` | 检查传入的值是否为只读对象 [#](https://cn.vuejs.org/api/reactivity-utilities.html#isreadonly)
+<!--rehype:className=style-list-->
 
 ### 组合式 API - 响应式: 核心
 
@@ -753,6 +775,7 @@ API 参考
 `watchPostEffect()` | `watchEffect()` 使用 `flush: 'post'` 选项时的别名。 [#](https://cn.vuejs.org/api/reactivity-core.html#watchposteffect)
 `watchSyncEffect()` | `watchEffect()` 使用 `flush: 'sync'` 选项时的别名。 [#](https://cn.vuejs.org/api/reactivity-core.html#watchsynceffect)
 `watch()` | 侦听一个或多个响应式数据源 [#](https://cn.vuejs.org/api/reactivity-core.html#watch)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 状态选项
 
@@ -765,9 +788,10 @@ API 参考
 `watch` | 声明在数据更改时调用的侦听回调 [#](https://cn.vuejs.org/api/options-state.html#watch)
 `emits` | 声明由组件触发的自定义事件 [#](https://cn.vuejs.org/api/options-state.html#emits)
 `expose` | 声明当组件实例被父组件通过模板引用访问时暴露的公共属性 [#](https://cn.vuejs.org/api/options-state.html#expose)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 生命周期选项
-<!--rehype:wrap-class=row-span-2-->
+<!--rehype:wrap-class=row-span-3-->
 
 :- | :-
 :- | :-
@@ -785,6 +809,7 @@ API 参考
 `activated` | 若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#activated)
 `deactivated` | 若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#deactivated)
 `serverPrefetch` _SSR only_ | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 其他杂项
 
@@ -794,6 +819,7 @@ API 参考
 `inheritAttrs` | 是否启用默认的组件 `attribute` 透传行为 [#](https://cn.vuejs.org/api/options-misc.html#inheritattrs)
 `components` | 注册对当前组件实例可用的组件 [#](https://cn.vuejs.org/api/options-misc.html#components)
 `directives` | 注册对当前组件实例可用的指令 [#](https://cn.vuejs.org/api/options-misc.html#directives)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 渲染选项
 
@@ -802,6 +828,7 @@ API 参考
 `template` | 声明组件的字符串模板 [#](https://cn.vuejs.org/api/options-rendering.html#template)
 `render` | 编程式地创建组件虚拟 DOM 树的函数 [#](https://cn.vuejs.org/api/options-rendering.html#render)
 `compilerOptions` | 配置组件模板的运行时编译器选项 [#](https://cn.vuejs.org/api/options-rendering.html#compileroptions)
+<!--rehype:className=style-list-->
 
 ### 选项式 API - 组件实例
 <!--rehype:wrap-class=row-span-2-->
@@ -851,6 +878,7 @@ API 参考
 `v-once` | 只渲染元素和组件一次 [#](https://cn.vuejs.org/api/built-in-directives.html#v-once)
 `v-memo` _(3.2+)_ | 缓存一个模板的子树 [#](https://cn.vuejs.org/api/built-in-directives.html#v-memo)
 `v-cloak` | 保持在元素上直到实例结束编译 [#](https://cn.vuejs.org/api/built-in-directives.html#v-cloak)
+`serverPrefetch` _SSR only_ | 组件实例在服务器上被渲染之前调用 [#](https://cn.vuejs.org/api/options-lifecycle.html#serverprefetch)
 
 ### 内置内容 - 组件
 
@@ -861,6 +889,7 @@ API 参考
 `<KeepAlive>` | 缓存包裹在其中的动态切换组件 [#](https://cn.vuejs.org/api/built-in-components.html#keepalive)
 `<Teleport>` | 将其插槽内容渲染到 DOM 中的另一个位置 [#](https://cn.vuejs.org/api/built-in-components.html#teleport)
 `<Suspense>` _(Experimental)_ | 协调对组件树中嵌套的异步依赖的处理 [#](https://cn.vuejs.org/api/built-in-components.html#suspense)
+<!--rehype:className=style-list-->
 
 ### 内置内容 - 特殊 Attributes
 
@@ -948,6 +977,7 @@ API 参考
 `ComponentCustomOptions` | 扩展组件选项类型以支持自定义选项 [#](https://cn.vuejs.org/api/utility-types.html#componentcustomoptions)
 `ComponentCustomProps` | 扩展全局可用的 TSX props [#](https://cn.vuejs.org/api/utility-types.html#componentcustomprops)
 `CSSProperties` | 扩展在样式属性绑定上允许的值的类型 [#](https://cn.vuejs.org/api/utility-types.html#cssproperties)
+<!--rehype:className=style-list-->
 
 ### 进阶 API - 自定义渲染
 

docs/yum.md

@@ -416,7 +416,7 @@ yum install --downloadonly vsftpd
 ---
 
 - [YUM 官方网站](http://yum.baseurl.org/) _(yum.baseurl.org)_
-- [YUM 备忘清单(适用于红帽 RedHad 企业 Linux)](https://access.redhat.com/sites/default/files/attachments/rh_yum_cheatsheet_1214_jcs_print-1.pdf) _(access.redhat.com)_
+- [YUM 备忘清单(适用于红帽 RedHat 企业 Linux)](https://access.redhat.com/sites/default/files/attachments/rh_yum_cheatsheet_1214_jcs_print-1.pdf) _(access.redhat.com)_
 - [用 yum 管理软件包](http://prefetch.net/articles/yum.html) _(prefetch.net)_
 - [Fedora 中的 Yum 文档](https://docs.fedoraproject.org/en-US/Fedora/15/html/Deployment_Guide/ch-yum.html) _(fedoraproject.org)_
 - [CentOS 中的 Yum 文档](http://wiki.centos.org/PackageManagement/Yum/) _(wiki.centos.org)_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wcj/reference",
-  "version": "1.24.0",
+  "version": "1.25.0",
   "description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
   "author": "jaywcjlove",
   "license": "MIT",

scripts/assets/flutter.svg

@@ -0,0 +1,12 @@
+<svg viewBox="0 0 256 317" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" height="1em" width="1em">
+  <defs>
+    <linearGradient x1="3.952%" y1="26.993%" x2="75.897%" y2="52.919%" id="a">
+      <stop offset="0%"/>
+      <stop stop-opacity="0" offset="100%"/>
+    </linearGradient>
+  </defs>
+  <path fill="#47C5FB" d="M157.666 0 0 157.667l48.8 48.8L255.268.001zm-1.099 145.397L72.15 229.815l48.984 49.716 48.71-48.71 85.425-85.424z"/>
+  <path fill="#00569E" d="m121.133 279.531 37.082 37.082h97.052l-85.425-85.792z"/>
+  <path fill="#00B5F8" d="m71.6 230.364 48.801-48.801 49.441 49.258-48.71 48.71z"/>
+  <path fill-opacity=".8" fill="url(#a)" d="m121.133 279.531 40.56-13.459 4.029-31.13z"/>
+</svg>

scripts/assets/mitmproxy.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 209 204">
+<g fill="none" fill-rule="evenodd" transform="translate(5 5.644)">
+<path fill="#F15A29" fill-rule="nonzero" d="M114,96.3562512 C114,104.088251 107.732,110.356251 100,110.356251 C92.268,110.356251 86,104.088251 86,96.3562512 C86,88.6242512 92.268,82.3562512 100,82.3562512 C107.732,82.3562512 114,88.6242512 114,96.3562512 Z"/>
+<path stroke="#F7941E" stroke-width="4" d="M119.5,96.3562512 C119.5,107.126251 110.77,115.856251 100,115.856251 C89.23,115.856251 80.5,107.126251 80.5,96.3562512 C80.5,85.5862512 89.23,76.8562512 100,76.8562512 C110.77,76.8562512 119.5,85.5862512 119.5,96.3562512 Z"/>
+<g stroke="currentColor" stroke-width="10">
+<path d="M130,96.3562512 C130,112.925251 116.569,126.356251 100,126.356251 C83.431,126.356251 70,112.925251 70,96.3562512 C70,79.7872512 83.431,66.3562512 100,66.3562512 C116.569,66.3562512 130,79.7872512 130,96.3562512 Z"/>
+<path d="M167,24.3562512 C133.273,-4.80574879 84.314,-8.11674879 46.967,16.2392512 C9.62,40.5952512 -7.089,86.7342512 6,129.356251 L44,129.356251 C55.0860053,149.157715 75.6966688,161.743751 98.3755043,162.561006 C121.05434,163.378261 142.517468,152.308398 155,133.356251 M0,96.3562512 L70,96.3562512"/></g>
+<path fill="#F7941E" fill-rule="nonzero" d="M164,125.356251 C164,128.66996 161.313708,131.356251 158,131.356251 C154.686292,131.356251 152,128.66996 152,125.356251 C152,122.042543 154.686292,119.356251 158,119.356251 C161.313708,119.356251 164,122.042543 164,125.356251 Z"/>
+<path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(148 115.356)"/>
+<path fill="#F7941E" fill-rule="nonzero" d="M179,31.3562512 C179,34.6699597 176.313708,37.3562512 173,37.3562512 C169.686292,37.3562512 167,34.6699597 167,31.3562512 C167,28.0425427 169.686292,25.3562512 173,25.3562512 C176.313708,25.3562512 179,28.0425427 179,31.3562512 Z"/>
+<g stroke="currentColor" transform="translate(33 21.356)">
+<path stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(130)"/>
+<path stroke-width="10" d="M0,147 C33.727,176.162 82.686,179.473 120.033,155.117 C157.38,130.761 174.089,84.622 161,42 L123,42 C111.913995,22.1985361 91.3033312,9.61250069 68.6244957,8.79524536 C45.9456602,7.97799002 24.4825319,19.0478528 12,38 M167,75 L97,75"/></g>
+<path fill="#F7941E" fill-rule="nonzero" d="M48,67.3562512 C48,70.6699597 45.3137085,73.3562512 42,73.3562512 C38.6862915,73.3562512 36,70.6699597 36,67.3562512 C36,64.0425427 38.6862915,61.3562512 42,61.3562512 C45.3137085,61.3562512 48,64.0425427 48,67.3562512 Z"/>
+<path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(32 57.356)"/>
+<path fill="#F7941E" fill-rule="nonzero" d="M33,161.356251 C33,163.499845 31.8564065,165.480607 30,166.552404 C28.1435936,167.624201 25.8564064,167.624201 24,166.552404 C22.1435935,165.480607 21,163.499845 21,161.356251 C21,158.042543 23.6862915,155.356251 27,155.356251 C30.3137085,155.356251 33,158.042543 33,161.356251 L33,161.356251 Z"/>
+<path stroke="currentColor" stroke-width="3.2" d="M20,10 C20,15.523 15.523,20 10,20 C4.477,20 0,15.523 0,10 C0,4.477 4.477,0 10,0 C15.523,0 20,4.477 20,10 Z" transform="translate(17 151.356)"/>
+</g>
+</svg>

scripts/assets/nestjs.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933" height="1em" width="1em">
+  <path d="M9.97.033c-.122 0-.236.026-.34.06a.97.97 0 0 1 .407.568c.004.03.013.052.017.083s.01.052.01.08c.018.385-.1.433-.184.66a.934.934 0 0 0 .06.86.52.52 0 0 0 .052.096c-.166-1.106.757-1.273.927-1.618.013-.302-.236-.503-.433-.643a.97.97 0 0 0-.516-.15zm1.39.25c-.018.1-.004.074-.01.127l-.01.114-.03.105c-.01.035-.022.07-.035.105l-.048.1c-.013.018-.022.035-.035.052l-.026.04-.066.087c-.026.026-.048.057-.08.08s-.052.052-.083.074c-.092.07-.197.122-.293.188-.03.022-.06.04-.087.066a.64.64 0 0 0-.083.07c-.03.026-.052.052-.08.083s-.048.057-.066.087l-.06.092-.048.1-.035.1-.03.11c-.004.018-.004.04-.01.057s-.004.035-.01.052l-.004.11c0 .026 0 .052.004.08 0 .035.004.07.013.11s.013.07.022.105l.035.105.03.06-1.006-.39-.507-.13-.276-.066a8.12 8.12 0 0 0-.796-.118c-.01 0-.013-.004-.022-.004l-.783-.04-.573.022a8.35 8.35 0 0 0-.8.096l-.197.035-.394.087-.197.052-.188.083-.144.066c-.01.004-.018.004-.022.01l-.122.06c-.013.004-.022.01-.03.013l-.136.07c-.03.013-.06.03-.087.044-.013.01-.03.017-.04.022l-.114.066a1.1 1.1 0 0 0-.105.066l-.087.06-.096.07-.074.06c-.01.004-.018.013-.026.018l-.066.057c-.004.01-.013.013-.018.018l-.08.074-.087.083-.074.08c-.01.01-.022.018-.03.026a1.23 1.23 0 0 1-.074.079c-.004.01-.013.013-.018.022l-.1.105-.236.227c-.08.07-.162.136-.245.192l-.262.166a2.41 2.41 0 0 1-.276.13 3.15 3.15 0 0 1-.284.105c-.184.04-.372.114-.534.127-.035 0-.074.01-.11.013l-.11.026-.105.04a1.12 1.12 0 0 0-.105.048c-.03.022-.066.04-.096.06s-.06.048-.087.074-.06.052-.087.08l-.074.087c-.022.035-.048.066-.066.1a.77.77 0 0 0-.061.101l-.048.114-.04.114-.022.105c-.013.052-.013.105-.018.13s0 .058 0 .089a.25.25 0 0 0 .004.057c.004.03.01.057.018.083l.03.08c.013.03.03.057.048.083l.057.08.074.07a.64.64 0 0 0 .083.07c.105.092.13.122.267.192.022.013.044.022.07.035.013.013.013.017.018.026.004.035.013.07.022.105a.59.59 0 0 0 .035.105l.035.08c.004.01.01.018.013.022l.052.096.066.092.074.083c.026.026.052.048.083.074l.087.066c.03.022.06.04.096.057a.71.71 0 0 0 .101.048c.026.013.057.022.087.03s.057.018.074.022c-.013.236-.018.46.018.538.04.087.232-.18.424-.485-.026.302-.044.656 0 .76s.31-.232.538-.608c3.1-.717 5.93 1.426 6.227 4.452-.057-.472-.638-.735-.905-.67-.13.324-.354.74-.713.997a2.83 2.83 0 0 0-.044-.875 2.83 2.83 0 0 1-.542 1.102c-.415.03-.83-.17-1.05-.472-.018-.013-.022-.04-.035-.057l-.035-.092c-.013-.03-.022-.06-.026-.092s-.004-.06-.004-.096v-.066c.004-.03.013-.06.022-.092l.03-.092c.018-.03.03-.06.052-.092.074-.2.074-.38-.06-.48a.502.502 0 0 0-.083-.044c-.018-.004-.04-.013-.057-.018l-.035-.013-.092-.022a.33.33 0 0 0-.092-.013.71.71 0 0 0-.096-.009c-.022 0-.044.004-.066.004a.34.34 0 0 0-.096.013l-.092.017-.092.03-.087.04-.083.044c-1.02.665-.41 2.22.284 2.672-.262.048-.53.105-.603.162.18.122.376.22.582.302l.708.2c.363.08.73.105 1.102.083a4.16 4.16 0 0 0 3.813-3.551l.026.114.04.245.018.118.01.13.01.144v.07c0 .022.004.048.004.07s-.004.052-.004.08v.06c0 .03-.004.057-.004.087 0 .017 0 .035-.004.057l-.004.096c-.004.013-.004.026-.004.04l-.013.1c0 .013 0 .026-.004.04l-.017.127v.01l-.026.122-.026.13-.035.136-.035.136-.044.14-.096.254-.052.127-.06.122c-.004.013-.01.022-.013.03a4.167 4.167 0 0 1-1.238 1.482c-.035.022-.07.048-.105.074-.01.01-.022.013-.03.022l-.096.066.013.026h.004l.184-.026h.004l.34-.06a.664.664 0 0 0 .096-.022l.06-.013.092-.017.08-.022a8.41 8.41 0 0 0 1.268-.42 6.993 6.993 0 0 1-2.716 2.217 7.163 7.163 0 0 0 1.49-.258 6.986 6.986 0 0 0 4.133-3.302 6.98 6.98 0 0 1-1.176 2.812c.424-.28.813-.603 1.168-.97a6.93 6.93 0 0 0 1.841-3.717c.15.69.192 1.404.127 2.108 3.157-4.404.262-8.97-.95-10.172-.004-.01-.01-.013-.01-.022-.01.052-.013.105-.017.157-.013.1-.026.197-.044.293s-.048.192-.074.29-.066.188-.105.28-.083.18-.13.267a2.98 2.98 0 0 1-.157.249 3.114 3.114 0 0 1-.18.236 3.27 3.27 0 0 1-.206.219c-.044.04-.083.074-.127.11l-.1.087a2.44 2.44 0 0 1-.245.171 3.03 3.03 0 0 1-.258.149 6.638 6.638 0 0 1-.276.122 3.08 3.08 0 0 1-.284.092c-.096.026-.197.048-.293.066s-.2.026-.297.035c-.07.004-.14.01-.2.01-.1 0-.2-.01-.297-.018s-.2-.022-.298-.044a2.21 2.21 0 0 1-.293-.074h-.004c.096-.01.192-.018.29-.035s.197-.04.293-.066.192-.057.284-.092.188-.08.276-.122a3.06 3.06 0 0 0 .262-.144c.083-.057.166-.114.245-.175a2.39 2.39 0 0 0 .223-.197c.074-.066.14-.14.206-.214s.127-.157.184-.236c.01-.013.018-.03.026-.044l.127-.2c.048-.087.092-.175.13-.267s.074-.184.105-.28.052-.188.074-.284.035-.197.044-.293.017-.2.017-.297c0-.07-.004-.14-.01-.2-.01-.1-.022-.197-.035-.293a3.2 3.2 0 0 0-.066-.293c-.03-.092-.06-.188-.096-.28s-.08-.184-.122-.27-.096-.175-.15-.258-.114-.162-.175-.24l-.2-.223a2.73 2.73 0 0 0-.114-.109 8.05 8.05 0 0 0-.608-.429 1.184 1.184 0 0 0-.087-.044 1.711 1.711 0 0 0-.415-.184z" fill="currentColor" fill-rule="evenodd"/>
+</svg>

scripts/create.mjs

@@ -82,7 +82,14 @@ export function create(str = '', options = {}) {
       if (iconName) {
         detailData.icon = iconName;
       }
-      homeCardIcons(node, parent, options.isHome);
+      const resultHomeCard = homeCardIcons(node, parent, options.isHome);
+      if (options.filename && resultHomeCard[options.filename]) {
+        detailData.rgb = resultHomeCard[options.filename].rgb;
+        detailData.name = resultHomeCard[options.filename].title;
+        if (resultHomeCard[options.filename].tags) {
+          detailData.tags = resultHomeCard[options.filename].tags;
+        }
+      }
       tooltips(node, index, parent);
       htmlTagAddAttri(node, options);
       rehypeUrls(node);
@@ -111,7 +118,6 @@ export function create(str = '', options = {}) {
           }
           node.children.unshift(header(options));
           node.children.push(footer(options));
-          // node.children.push(search(options));
           node.children = node.children.concat(search(options));
         }
       }

scripts/index.mjs

@@ -42,7 +42,7 @@ export async function createHTML(files = [], num = 0) {
   const { html, data } = create(mdstr.toString(), options);
   if (!options.isHome) {
     const searchData = await fs.readJSON(SEARCH_DATA_CACHE);
-    data.path = path.relative(OUTOUT, outputHTMLPath);
+    data.path = path.relative(OUTOUT, outputHTMLPath).replace(/[\\/]/g, '/');
     searchData[options.filename] = data;
     searchData.name = options.filename;
     await fs.writeJSON(SEARCH_DATA_CACHE, searchData);
@@ -76,7 +76,7 @@ export async function run() {
     await copyCSSFile();
     await copyJSFile();
     const files = await recursiveReaddirFiles(process.cwd(), {
-      ignored: /\/(node_modules|\.git)/,
+      ignored: /[\\/](node_modules|\.git)/g,
       exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
       filter: (item) => item.ext === 'md',
     });

scripts/js/main.js

@@ -41,8 +41,9 @@ const fuse = new Fuse(REFS_DATA, {
   matchEmptyQuery: !0,
   threshold: .1,
   keys: [
-    { name: "title", weight: 12 }, 
+    { name: "name", weight: 20 }, 
     { name: 'intro', weight: 2 }, 
+    { name: 'tags', weight: 2 }, 
     { name: 'sections.t', weight: 5 }
   ],
 });
@@ -54,7 +55,9 @@ const closeBtn = document.getElementById('mysearch-close');
 const searchMenu = document.getElementById('mysearch-menu');
 const searchContent = document.getElementById('mysearch-content');
 const isHome = document.body.classList.contains('home');
-
+function getDocUrl(url = '') {
+  return isHome ? url : url.replace('docs/', '');
+}
 searchBtn.addEventListener('click', (ev) => {
   ev.preventDefault();
   showSearch();
@@ -64,15 +67,51 @@ closeBtn.addEventListener('click', hideSearch);
 searchBox.addEventListener('click', hideSearch);
 searchBox.firstChild.addEventListener('click', (ev) => ev.stopPropagation());
 searchInput.addEventListener('input', (evn) => searchResult(evn.target.value));
+
+let activeMenu = {}
+let result = []
+let inputValue = '';
+let activeIndex = 0
+
 document.addEventListener('keydown', (ev) => {
   if (ev.metaKey && ev.key.toLocaleLowerCase() === 'k') {
     searchBox.classList.contains('show') ? hideSearch() : showSearch();
   }
+  if (ev.key.toLocaleLowerCase() === 'enter') {
+    window.location.href = getDocUrl(activeMenu.path)
+  }
+  if (ev.key.toLocaleLowerCase() === 'arrowdown') {
+    activeAnchorElm('down')
+  }
+  if (ev.key.toLocaleLowerCase() === 'arrowup') {
+    activeAnchorElm('up')
+  }
 });
 
+function activeAnchorElm(type) {
+  if (type === 'down') {
+    ++activeIndex;
+  }
+  if (type === 'up') {
+    --activeIndex;
+  }
+  const data = Array.from(searchMenu.children);
+  if (activeIndex < 0) activeIndex = 0;
+  if (activeIndex >= data.length) activeIndex = data.length - 1;
+  anchorElm = data[activeIndex];
+  if (anchorElm) {
+    data.forEach(item => item.classList.remove('active'));
+    anchorElm.classList.add('active');
+    activeMenu = result[activeIndex];
+    activeIndex = activeIndex;
+    searchSectionsResult(activeIndex);
+  }
+}
+
 function showSearch() {
   document.body.classList.add('search');
   searchBox.classList.add('show');
+  searchResult(searchInput.value || '');
   searchInput.focus();
 }
 
@@ -80,31 +119,42 @@ function hideSearch() {
   document.body.classList.remove('search');
   searchBox.classList.remove('show');
 }
-let result = []
+function getValueReg(val = '') {
-let inputValue = '';
+  return new RegExp(val.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&').replace(/-/g, '\\x2d'), 'ig');
+}
 
 function searchResult(value) {
   inputValue = value;
   result = fuse.search(value);
+  if (!value) {
+    result = REFS_DATA.map(item => ({ item: item }));
+  }
   let menuHTML = '';
   result.forEach((item, idx) => {
-    const label = item.item.title.replace(new RegExp(value, 'ig'), (txt) => {
+    const label = item.item.name.replace(getValueReg(value), (txt) => {
-      return `<mark>${txt}</mark>`
+      return `<mark>${txt}</mark>`;
+    })
+    const tags = (item.item.tags || []).join(',').replace(getValueReg(value), (txt) => {
+      return `<mark>${txt}</mark>`;
     })
     const href = isHome ? item.item.path : item.item.path.replace('docs/', '');
     if (idx === 0) {
-      menuHTML += `<a href="${href}" class="active">${label}</a>`;
+      activeIndex = idx;
+      activeMenu = item.item;
+      menuHTML += `<a href="${href}" class="active"><span>${label}</span><sup>${tags}</sup></a>`;
     } else {
-      menuHTML += `<a href="${href}">${label}</a>`;
+      menuHTML += `<a href="${href}"><span>${label}</span><sup>${tags}</sup></a>`;
     }
   });
   searchMenu.innerHTML = menuHTML;
   searchSectionsResult();
-  const data = Array.from(searchMenu.children)
+  const data = Array.from(searchMenu.children);
   data.forEach((anchor, idx) => {
     anchor.onmouseenter = (evn) => {
       data.forEach(item => item.classList.remove('active'));
       evn.target.classList.add('active');
+      activeMenu = result[idx];
+      activeIndex = idx;
       searchSectionsResult(idx);
     }
   });
@@ -113,26 +163,21 @@ function searchResult(value) {
     item.addEventListener('click', hideSearch);
   })
 }
-
 function searchSectionsResult(idx = 0) {
   const data = result[idx] || [];
-  const title = (data.item?.intro || '').replace(new RegExp(inputValue, 'ig'), (txt) => {
+  const title = (data.item?.intro || '').replace(getValueReg(inputValue), (txt) => `<mark>${txt}</mark>`);
-    return `<mark>${txt}</mark>`
-  });
   let sectionHTML = `<h3>${title}</h3><ol>`;
   if (data && data.item && data.item.sections) {
     data.item.sections.forEach((item, idx) => {
-      const label = item.t.replace(new RegExp(inputValue, 'ig'), (txt) => {
+      const label = item.t.replace(getValueReg(inputValue), (txt) => `<mark>${txt}</mark>`);
-        return `<mark>${txt}</mark>`
+      const href = getDocUrl(data.item.path);
-      })
-      const href = isHome ? data.item.path : data.item.path.replace('docs/', '');
       if (item.l < 3) {
-        sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>`
+        sectionHTML += `<li><a href="${href + item.a}">${label}</a><div>`;
       } else {
-        sectionHTML += `<a href="${href + item.a}">${label}</a>`
+        sectionHTML += `<a href="${href + item.a}">${label}</a>`;
       }
       if (data.item.sections.length === idx + 1) {
-        sectionHTML += `</div></li>`
+        sectionHTML += `</div></li>`;
       }
     })
   }

scripts/nodes/search.mjs

@@ -62,7 +62,12 @@ export function search({ homePath = '', isHome } = {}) {
                     {
                       type: 'element',
                       tagName: 'input',
-                      properties: { id: ['mysearch-input'], type: 'search' },
+                      properties: {
+                        id: ['mysearch-input'],
+                        type: 'search',
+                        placeholder: '搜索备忘清单',
+                        autocomplete: 'off',
+                      },
                       children: [],
                     },
                     {

scripts/style/style.css

@@ -549,7 +549,7 @@ a.text-grey {
 .header-nav .menu .searchbtn span:last-child {
   transition: all 0.3s;
   border: 1px solid var(--color-border-default);
-  border-radius: 3px;
+  border-radius: 0.4rem;
   padding: 1px 1px 1px 3px;
   letter-spacing: 3px;
 }
@@ -853,11 +853,11 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
 .h2wrap-body ul.style-timeline {
   counter-reset: stepCount;
 }
-.h2wrap-body ul.style-timeline li:first-child:before {
+.h2wrap-body ul.style-timeline > li:first-child:before {
   background-color: #228e6c;
   color: rgb(226 232 240/1);
 }
-.h2wrap-body ul.style-timeline li::before {
+.h2wrap-body ul.style-timeline > li::before {
   color: #228e6c;
   background-color: var(--color-canvas-default);
   counter-increment: stepCount;
@@ -873,10 +873,10 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   top: -1px;
   left: -14px;
 }
-.h2wrap-body ul.style-timeline li:last-child {
+.h2wrap-body ul.style-timeline > li:last-child {
   border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%;
 }
-.h2wrap-body ul.style-timeline li {
+.h2wrap-body ul.style-timeline > li {
   border-bottom: 0 !important;
   padding-top: 0 !important;
   padding-bottom: 25px !important;
@@ -884,7 +884,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
   margin-left: 30px;
   border-left-color: #46c69e96;
 }
-.h2wrap-body ul.style-timeline li > pre {
+.h2wrap-body ul.style-timeline > li > pre {
   padding: 0 !important;
   padding-top: 10px !important;
   height: initial !important;
@@ -1234,7 +1234,6 @@ body.search {
   height: 100%;
 }
 #mysearch.show .mysearch-result > * {
-  width: 50%;
   overflow-y: auto;
   padding: 0.6rem;
 }
@@ -1260,6 +1259,10 @@ body.search {
   justify-content: center;
 }
 
+.mysearch-input input::placeholder {
+  font-weight: normal;
+  font-size: 1.3rem;
+}
 .mysearch-input {
   height: 3.5rem;
   display: flex;
@@ -1315,12 +1318,24 @@ body.search {
   white-space: pre-wrap;
   text-decoration: none;
   color: var(--color-fg-default);
+  align-items: center;
+  justify-content: space-between;
+}
+#mysearch-menu a > sup {
+  color: var(--color-fg-subtle);
+  font-size: 0.7rem;
 }
 #mysearch-menu a:hover,
 #mysearch-menu a.active {
   background-color: var(--color-neutral-muted);
   border-radius: 0.5rem;
 }
+#mysearch-menu {
+  width: 25rem;
+}
+#mysearch-content {
+  flex: 1;
+}
 #mysearch-content ol li div a:hover {
   background-color: var(--primary-color);
   color: #fff;

scripts/utils/darkMode.mjs

@@ -4,7 +4,7 @@ import { getSVGNode } from './getSVGNode.mjs';
 const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
 
 export function darkMode({ homePath = '', isHome } = {}) {
-  const relativePath = homePath.replace(/\/?index.html$/, isHome ? '' : '/');
+  const relativePath = homePath.replace(/[\\/]?index.html$/, isHome ? '' : '/');
   const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
   const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
   const sunNode = getSVGNode(iconSunPath);

scripts/utils/homeCardIcons.mjs

@@ -1,7 +1,11 @@
 import fs from 'fs-extra';
 import path from 'path';
+import { getCodeString } from 'rehype-rewrite';
 import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
 
+const resultHomeCard = {};
+const COLOR_REG = /background:(\s+)?rgb\(([\d]+\s+[\d]+\s+[\d]+(\s+)?)\);?/gi;
+
 export function homeCardIcons(node, parent, isHome) {
   if (
     isHome &&
@@ -22,16 +26,23 @@ export function homeCardIcons(node, parent, isHome) {
   ) {
     node.children = node.children.map((child) => {
       const href = child.properties?.href;
-      if (href) {
+      if (href && href.endsWith('.md')) {
         const iconName = path.basename(href, '.md');
         const iconPath = path.resolve(ICONS_PATH, `${iconName}.svg`);
         const iconDefaultPath = path.resolve(ICONS_PATH, `list.svg`);
         const iconExist = fs.existsSync(iconPath);
+        let color = '';
+        child.properties.style = child.properties.style.replace(COLOR_REG, (str) => {
+          color = str.replace(COLOR_REG, '$2');
+          return str.replace(/(\);)/, '/ var(--bg-opacity)$1');
+        });
+        const tags = child.properties['data-lang'];
         const labelNode = {
           type: 'element',
           tagName: 'span',
           children: child.children,
         };
+        const title = getCodeString(child.children);
         if (iconExist) {
           const svgNode = getSVGNode(iconPath);
           child.children = [...svgNode, labelNode];
@@ -39,8 +50,15 @@ export function homeCardIcons(node, parent, isHome) {
           const svgNode = getSVGNode(iconDefaultPath);
           child.children = [...svgNode, labelNode];
         }
+        resultHomeCard[iconName] = {
+          md: iconName,
+          title: title,
+          rgb: color,
+          tags: tags ? tags.split('/') : [],
+        };
       }
       return child;
     });
   }
+  return resultHomeCard;
 }