diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1824290a..ba58080a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
### 更新信息
+- 2024.05.14：ai utils增加单测prompt；主页链接调整
- 2024.04.27：web utils资源加载方法、ua环境判断优化
- 2024.04.07：utils 增加 env环境判断、web utils 增加资源加载相关方法
- 2024.03.10：修改 utils & web util functions(部分方法类型声明及参数处理优化, Storage)
diff --git a/README-en.md b/README-en.md
index 1cce1600..9556ead0 100644
--- a/README-en.md
+++ b/README-en.md
@@ -214,6 +214,7 @@ A schema declaration and verification library headed by TypeScript, which can be
| http://lab.ejci.net/favico.js/ | favicojs | A plugin for animating the pc website icon. |
| https://alvarotrigo.com/fullPage/ | fullpagejs | A plugin for quickly building full-screen scrolling pages. |
| https://github.com/buuing/lucky-canvas | lucky-canvas | A lottery plugin that supports web and cross-platform compatibility with mini-programs (large turntables/nine-square grids/slot machines). |
+| https://mattboldt.com/demos/typed-js/ | typed.js | A js UI library that simulates typewriter effects. |
### Video/Audio
diff --git a/README.md b/README.md
index dca3390e..0dc8f1be 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@
TypeScript官方手册 | `typescript` | TypeScript官方手册。
TypeScript Challenges | `ts-challenges` | TypeScript Challenges，在线学习/检验自己的ts类型编程水平。
ECMA standards | `ecma` | ECMAScript 协议标准。
-ECMA International(6) | `ES6` | ECMAScript6官方文档。
+ECMA International(6) | `ES6` | ECMAScript6官方文档。
ECMA International(6) 汉化 | `ES6` | ECMAScript6官方文档的中文翻译版（只有少部分且挺久没更新了）。
ECMA6 features | `ES6` | 通俗易懂的ECMAScript6特性demos。
ES6入门（阮一峰） | `ES6` | 国内使用频率最高的ECMAScript6文档，特别适合新手。
@@ -209,6 +209,7 @@
favico.js | `favicojs` | 一款让pc网站图标动起来的插件。
fullPage.js | `fullpagejs` | 一款快速搭建全屏滚动页面的插件。
Lucky Canvas | `lucky-canvas` | 一款支持web、小程序跨平台的 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。
+Typedjs | `typed.js` | 一款模拟打字机效果的js UI库。
##### 视/音频
地址 | 标签 | 说明
@@ -217,7 +218,7 @@
video.js | `videojs` | 一款视频控制插件。
flv.js | `flvjs` | 一款无需flash的flv播放插件。
howler.js | `howlerjs` | 视、音频控制插件。
-jplayer | `jplayer` | jQuery的视、音频控制插件。
+jplayer | `jplayer` | jQuery的视、音频控制插件。
audio5.js | `audio5js` | 一款音频控制插件。
##### 图片
@@ -236,7 +237,7 @@
地址 | 标签 | 说明
---- | ---- | ----
Voca.js | `vocajs` | 字符串的驼峰/修饰/填充/截断/转义/大小写更改等等。
-anchorme.js | `anchormejs` | 自动将文本中的链接/URL/电子邮件转化为可点击的锚点链接。
+anchorme.js | `anchormejs` | 自动将文本中的链接/URL/电子邮件转化为可点击的锚点链接。
String.js | `stringjs` | 字符串的截取删除等操作库（很久没维护了）。
qs.js | `qsjs` | URL参数处理库。
nano-id | `nanoid` | 小型（130 字节）、安全、URL友好、唯一的字符串 ID 生成器。
@@ -248,9 +249,9 @@
#### 1.4.5 工具
地址 | 标签 | 说明
---- | ---- | ----
-RequireJs | `requirejs` | js模块化工具（webpack后很少有项目会用到）。
+RequireJs | `requirejs` | js模块化工具（webpack后很少有项目会用到）。
SeaJs | `seajs` | js模块化工具（webpack后很少有项目会用到）。
-Browserify | `browserify` | 浏览器端使用类似于 node 的 require() 方式。
+Browserify | `browserify` | 浏览器端使用类似于 node 的 require() 方式。
validate.js | `validate.js` | form表单校验工具。
validator.js | `validator.js` | 有名的内容校验工具，比如邮箱验证、数值验证等。
RxJS中文官网 | `RxJS` | ReactiveX编程理念的js异步编程库。
@@ -319,7 +320,7 @@
#### 1.4.10 加载
地址 | 标签 | 说明
---- | ---- | ----
-aload.js | `aload.js` | 异步图片/js/css加载工具。
+aload.js | `aload.js` | 异步图片/js/css加载工具。
layzr.js | `layzr.js` | 轻量图片懒加载工具。
lazysizes.js | `lazysizes` | 高性能的图片/iframe懒加载工具。
infinite-scroll.js | `infinite-scroll` | “无限”滚动的加载插件。
diff --git a/datas/README.md b/datas/README.md
new file mode 100644
index 00000000..7f77d219
--- /dev/null
+++ b/datas/README.md
@@ -0,0 +1,6 @@
+# fe-tools datas
+
+供 chrome 插件进行搜索和查询的数据。
+- `moo-css.json`：样式查询
+- `regex.json`：正则规则查询
+- `tools.json`：各常用链接查询
diff --git a/datas/moo-css.json b/datas/moo-css.json
new file mode 100644
index 00000000..18636ef7
--- /dev/null
+++ b/datas/moo-css.json
@@ -0,0 +1 @@
+[{"name":"样式模块词典","children":[{"name":"grid(g-)","children":[{"属性":"box-sizing","说明":"设置要应用盒子尺寸相关属性的元素","CSS版本":"3"},{"属性":"margin","说明":"设置元素盒子四个外边距宽度的简写属性","CSS版本":"1"},{"属性":"margin-bottom","说明":"设置盒子下外边距的宽度","CSS版本":"1"},{"属性":"margin-left","说明":"设置盒子左外边距的宽度","CSS版本":"1"},{"属性":"margin-right","说明":"设置盒子右外边距的宽度","CSS版本":"1"},{"属性":"margin-top","说明":"设置盒子上外边距的宽度","CSS版本":"1"},{"属性":"bottom","说明":"设置元素下外边距边界与包含块下边界之间的偏移","CSS版本":"2"},{"属性":"left","说明":"设置元素左外边距边界与包含块左边界之间的偏移","CSS版本":"2"},{"属性":"position","说明":"设置元素的定位方法","CSS版本":"2"},{"属性":"right","说明":"设置元素右外边距边界与包含块右边界之间的偏移","CSS版本":"2"},{"属性":"top","说明":"设置元素上外边距边界与包含块上边界之间的偏移","CSS版本":"2"},{"属性":"font","说明":"在一条声明中设置文本字体、大小和颜色的简写属性","CSS版本":"1"},{"属性":"font-size","说明":"该属性设置元素的字体大小","CSS版本":"1"},{"属性":"line-height","说明":"设置行高","CSS版本":"1"}]},{"name":"function(f-)","children":[{"属性":"background-attachment","说明":"设置元素的背景附着属性，决定背景图片是否随页面一起滚动","CSS版本":"1"},{"属性":"background-clip","说明":"设置元素背景颜色和图像的裁剪区域","CSS版本":"3"},{"属性":"background-origin","说明":"设置背景图像绘制的起始位置","CSS版本":"3"},{"属性":"background-position","说明":"设置背景图像在元素盒子中的位置","CSS版本":"1"},{"属性":"background-repeat","说明":"设置背景图像的重复方式","CSS版本":"1"},{"属性":"background-size","说明":"设置背景图像的绘制尺寸","CSS版本":"3"},{"属性":"border","说明":"为所有边界设置所有边框宽度的简写属性","CSS版本":"1"},{"属性":"border-bottom","说明":"为所有下边框设置宽度的简写属性","CSS版本":"1"},{"属性":"border-bottom-left-radius","说明":"将边框左下角设置为圆角","CSS版本":"3"},{"属性":"border-bottom-right-radius","说明":"将边框右下角设置为圆角","CSS版本":"3"},{"属性":"border-bottom-style","说明":"设置元素下边框的样式","CSS版本":"1"},{"属性":"border-image-repeat","说明":"指定边框图像的缩放和重复方式","CSS版本":"3"},{"属性":"border-image-slice","说明":"指定边框图像的切割方式","CSS版本":"3"},{"属性":"border-left","说明":"设置元素左边框的简写属性","CSS版本":"1"},{"属性":"border-left-style","说明":"设置左边框的样式","CSS版本":"1"},{"属性":"border-radius","说明":"指定圆角边框的简写属性","CSS版本":"3"},{"属性":"border-right","说明":"设置元素右边框的简写属性","CSS版本":"1"},{"属性":"border-right-style","说明":"设置右边框的样式","CSS版本":"1"},{"属性":"border-style","说明":"设置所有边框样式的简写属性","CSS版本":"1"},{"属性":"border-top","说明":"为所有上边框设置宽度的简写属性","CSS版本":"1"},{"属性":"border-top-left-radius","说明":"将边框左上角设置为圆角","CSS版本":"3"},{"属性":"border-top-right-radius","说明":"将边框右上角设置为圆角","CSS版本":"3"},{"属性":"border-top-style","说明":"设置元素上边框的样式","CSS版本":"1"},{"属性":"outline-offset","说明":"设置轮廓距离元素边框边缘的偏移量","CSS版本":"2"},{"属性":"outline-style","说明":"设置轮廓的样式","CSS版本":"2"},{"属性":"outline","说明":"在一条声明中设置轮廓的简写属性","CSS版本":"2"},{"属性":"clear","说明":"设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素","CSS版本":"1"},{"属性":"float","说明":"将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界","CSS版本":"1"},{"属性":"overflow","说明":"设置内容横向和竖向溢出盒子时处理方式的简写属性","CSS版本":"2"},{"属性":"overflow-x","说明":"设置内容横向溢出盒子时的处理方式","CSS版本":"3"},{"属性":"overflow-y","说明":"设置内容纵向溢出盒子时的处理方式","CSS版本":"3"},{"属性":"font","说明":"在一条声明中设置文本字体、大小和颜色的简写属性","CSS版本":"1"},{"属性":"font-family","说明":"指定文本所用的字体系列，排在前面的优先使用","CSS版本":"1"},{"属性":"font-style","说明":"指定采用正常字体、斜体还是倾斜字体","CSS版本":"1"},{"属性":"font-variant","说明":"指定字体是否以小型大写字母显示","CSS版本":"1"},{"属性":"font-weight","说明":"指定文本粗细","CSS版本":"1"},{"属性":"letter-spacing","说明":"设置字母间距","CSS版本":"1"},{"属性":"text-align","说明":"设置文本对齐方式","CSS版本":"1"},{"属性":"text-decoration","说明":"规定添加到文本的修饰（如下划线）","CSS版本":"1"},{"属性":"text-indent","说明":"规定文本块中首行文本的缩进","CSS版本":"1"},{"属性":"text-justify","说明":"设置文本对齐方式","CSS版本":"3"},{"属性":"word-spacing","说明":"指定单词间距","CSS版本":"1"},{"属性":"border-collapse","说明":"指定表格相邻单元格边框的显示样式","CSS版本":"2"},{"属性":"border-spacing","说明":"指定相邻单元格的边框的距离","CSS版本":"2"},{"属性":"cursor","说明":"指定光标的形状","CSS版本":"2"},{"属性":"empty-cells","说明":"指定是否显示表格中的空单元格","CSS版本":"2"},{"属性":"list-style","说明":"设置列表样式的简写属性","CSS版本":"1"},{"属性":"list-style-type","说明":"指定列表项标记的类型","CSS版本":"1"},{"属性":"transform","说明":"指定应用于元素的变换","CSS版本":"3"},{"属性":"transform-origin","说明":"指定元素变换的起点","CSS版本":"3"},{"属性":"vertical-align","说明":"该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐","CSS版本":"1"},{"属性":"text-transform","说明":"属性控制文本的大小写","CSS版本":"1"},{"属性":"direction","说明":"指定文本方向","CSS版本":"2"}]},{"name":"unit(u-)","children":[{"属性":"align-items","说明":"flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式","CSS版本":"3"},{"属性":"justify-content","说明":"用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式","CSS版本":"3"},{"属性":"caption-side","说明":"指定表格标题的位置","CSS版本":"2"},{"属性":"list-style-position","说明":"指定列表项标记相对于列表项内容的位置","CSS版本":"1"},{"属性":"table-layout","说明":"指定表格单元格、行和列的算法规则","CSS版本":"2"},{"属性":"border-bottom-width","说明":"设置元素下边框的宽度","CSS版本":"1"},{"属性":"border-image-width","说明":"设置边框图像的宽度","CSS版本":"3"},{"属性":"border-left-width","说明":"设置左边框的宽度","CSS版本":"1"},{"属性":"border-right-width","说明":"设置右边框的宽度","CSS版本":"1"},{"属性":"border-top-width","说明":"设置元素上边框的宽度","CSS版本":"1"},{"属性":"border-width","说明":"设置四个边框的宽度","CSS版本":"1"},{"属性":"outline-width","说明":"设置轮廓的宽度","CSS版本":"2"},{"属性":"outline","说明":"在一条声明中设置轮廓的简写属性","CSS版本":"2"},{"属性":"display","说明":"设置元素盒子的类型","CSS版本":"1"},{"属性":"height","说明":"设置元素盒子的高度","CSS版本":"1"},{"属性":"max-height","说明":"设置元素的最大高度","CSS版本":"2"},{"属性":"max-width","说明":"设置元素的最大宽度","CSS版本":"2"},{"属性":"min-height","说明":"设置元素的最小高度","CSS版本":"2"},{"属性":"min-width","说明":"设置元素的最小宽度","CSS版本":"2"},{"属性":"padding","说明":"设置元素盒子四个内边距宽度的简写属性","CSS版本":"1"},{"属性":"padding-bottom","说明":"设置盒子下内边距的宽度","CSS版本":"1"},{"属性":"padding-left","说明":"设置盒子左内边距的宽度","CSS版本":"1"},{"属性":"padding-right","说明":"设置盒子右内边距的宽度","CSS版本":"1"},{"属性":"padding-top","说明":"设置盒子上内边距的宽度","CSS版本":"1"},{"属性":"width","说明":"设置元素的宽度","CSS版本":"1"},{"属性":"column-count","说明":"指定多列布局的列数","CSS版本":"3"},{"属性":"column-fill","说明":"多列布局中列与列之间的内容如何发布","CSS版本":"3"},{"属性":"column-gap","说明":"指定多列布局中列与列之间的间隔","CSS版本":"3"},{"属性":"column-rule","说明":"多列布局中定义列与列之间的规则的简写属性","CSS版本":"3"},{"属性":"column-rule-color","说明":"设置多列布局中的颜色规划","CSS版本":"3"},{"属性":"column-rule-style","说明":"设置多列布局中的样式规则","CSS版本":"3"},{"属性":"column-rule-width","说明":"设置多列布局中的宽度规则","CSS版本":"3"},{"属性":"columns","说明":"在多列布局中设置列数和列宽度的简写属性","CSS版本":"3"},{"属性":"column-span","说明":"指定多列布局中元素能跨多少列","CSS版本":"3"},{"属性":"column-width","说明":"设置多列布局中列的宽度","CSS版本":"3"},{"属性":"flex-align、flex-direction、flex-order、flex-pack","说明":"它们都是由弹性盒子布局定义的","CSS版本":"3"}]},{"name":"status(z-)","children":[{"属性":"visibility","说明":"设置元素的可见性","CSS版本":"2"},{"属性":"z-index","说明":"设置定位元素的堆叠顺序","CSS版本":"2"},{"属性":"opacity","说明":"设置元素的透明度","CSS版本":"3"},{"属性":"display","说明":"指定元素在页面上的显示方式","CSS版本":"1"}]},{"name":"skin(s-)","children":[{"属性":"color","说明":"设置元素的前景色","CSS版本":"1"},{"属性":"list-style-image","说明":"指定列表项标记使用的图像","CSS版本":"1"},{"属性":"text-shadow","说明":"指定文本块的阴影效果","CSS版本":"3"},{"属性":"box-shadow","说明":"设置元素的一个或者多个阴影效果","CSS版本":"3"},{"属性":"outline-color","说明":"设置元素边框外围轮廓线的颜色","CSS版本":"2"},{"属性":"border-color","说明":"可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色","CSS版本":"1"},{"属性":"border-top-color","说明":"为所有上边框设置颜色","CSS版本":"1"},{"属性":"border-right-color","说明":"设置右边框的颜色","CSS版本":"1"},{"属性":"border-left-color","说明":"设置左边框的颜色","CSS版本":"1"},{"属性":"border-bottom-color","说明":"为所有下边框设置颜色","CSS版本":"1"},{"属性":"background-color","说明":"设置背景颜色","CSS版本":"1"}]},{"name":"animation(a-)","children":[{"属性":"transition","说明":"指定CSS属性过渡效果的简写属性","CSS版本":"3"},{"属性":"transition-delay","说明":"指定触发过渡的延迟时间","CSS版本":"3"},{"属性":"transition-duration","说明":"指定过渡的持续时间","CSS版本":"3"},{"属性":"transition-property","说明":"指定带有过渡效果的属性","CSS版本":"3"},{"属性":"transition-timing-function","说明":"指定过渡期间计算中间属性值的函数","CSS版本":"3"},{"属性":"animation","说明":"设置动画的简写属性","CSS版本":"3"},{"属性":"animation-deplay","说明":"指定动画开始前的延迟时间","CSS版本":"3"},{"属性":"animation-direction","说明":"指定动画重复播放时的播放方向","CSS版本":"3"},{"属性":"animation-duration","说明":"指定动画的持续时间","CSS版本":"3"},{"属性":"animation-iteration-count","说明":"指定动画的循环次数","CSS版本":"3"},{"属性":"animation-name","说明":"指定用于动画的关键帧集合的名称","CSS版本":"3"},{"属性":"animation-play-state","说明":"指定动画状态（播放或暂停）","CSS版本":"3"},{"属性":"animation-timing-function","说明":"指定关键帧之间计算属性值的函数","CSS版本":"3"}]}]},{"name":"moo-css-base词典","children":[{"name":"颜色","children":[{"变量":"body_bg","十六进制色值":"#efeef5","说明":"灰-页面背景","效果":""},{"变量":"part_bg","十六进制色值":"#fff","说明":"白-模块背景","效果":""},{"变量":"font-base","十六进制色值":"#323232","说明":"黑，正文-1","效果":""},{"变量":"font-base_","十六进制色值":"#333","说明":"黑，正文-2","效果":""},{"变量":"font-sub","十六进制色值":"#666","说明":"灰色-正文","效果":""},{"变量":"font-sub_","十六进制色值":"#999","说明":"浅灰-次要文字","效果":""},{"变量":"font-link","十六进制色值":"#11a6fc","说明":"蓝色-链接","效果":""},{"变量":"font-up","十六进制色值":"#fe5d4e","说明":"红色-涨","效果":""},{"变量":"font-down","十六进制色值":"#009801","说明":"绿色-跌","效果":""},{"变量":"button-red","十六进制色值":"#cf0e0f","说明":"红色，按钮","效果":""},{"变量":"button-orange","十六进制色值":"#ff7010","说明":"橙色，按钮","效果":""},{"变量":"button-yellow","十六进制色值":"#f1ae3f","说明":"黄色，按钮","效果":""},{"变量":"button-gray","十六进制色值":"#ccc","说明":"灰色，按钮","效果":""},{"变量":"button-disable","十六进制色值":"#d6d6d6","说明":"灰色，按钮不可用","效果":""},{"变量":"border-gray","十六进制色值":"#e2e2e2","说明":"边框-灰","效果":""},{"变量":"red","十六进制色值":"#fe5d4e","说明":"红色-涨、按钮","效果":""},{"变量":"orange-light","十六进制色值":"#ff8f2e","说明":"浅橙","效果":""},{"变量":"orange","十六进制色值":"#ff7010","说明":"橙色","效果":""},{"变量":"yellow","十六进制色值":"#f1ae3f","说明":"黄色","效果":""},{"变量":"green","十六进制色值":"#009801","说明":"绿色","效果":""},{"变量":"blue","十六进制色值":"#01a2fc","说明":"蓝色","效果":""},{"变量":"gray","十六进制色值":"#d3d6d8","说明":"灰色","效果":""},{"变量":"gray-light","十六进制色值":"#999","说明":"浅灰色","效果":""},{"变量":"white","十六进制色值":"#fff","说明":"白色","效果":""}]},{"name":"方法","children":[{"方法名":"unit","参数":"name, px","说明":"设置vw属性，name为属性名，px为像素值，如less：.unit(width, 100)","平台":"mobile"},{"方法名":"wh","参数":"width, height","说明":"设置宽高","平台":"mobile/PC"},{"方法名":"square","参数":"width","说明":"设置正方形(宽高相等)","平台":"mobile/PC"},{"方法名":"hh","参数":"height","说明":"设置高度同时设置行高，height=line-height","平台":"mobile/PC"},{"方法名":"font","参数":"font-size, line-height","说明":"设置字体大小及行高，如less：.font(24px, 40px)","平台":"mobile/PC"},{"方法名":"sc","参数":"font-size, color","说明":"设置字体大小及颜色，如less：.sc(26px, #ccc)","平台":"mobile/PC"},{"方法名":"mulit-ellipsis","参数":"maxline","说明":"多行文字溢出展示\"...\"，如less: .mulit-ellipsis(2)","平台":"mobile/PC"},{"方法名":"pseudo-class","参数":"-","说明":"设置伪元素布局，通常用作css图形、边框1px","平台":"mobile/PC"},{"方法名":"font-DIN","参数":"-","说明":"font-family使用DIN字体","平台":"mobile"},{"方法名":"position","参数":"top, left","说明":"设置top及left，如less：.position(10%, 15vh)","平台":"mobile/PC"},{"方法名":"bis","参数":"url","说明":"设置背景图且填充整个容器，如.bis('https://github.com/MichealWayne/Moo-CSS/raw/master/docs/logo.png')","平台":"mobile/PC"},{"方法名":"blur","参数":"range","说明":"设置模糊，range为模糊半径","平台":"mobile/PC"},{"方法名":"center","参数":"-","说明":"水平垂直居中定位","平台":"mobile/PC"},{"方法名":"fixed-mask","参数":"-","说明":"设置fixed全屏布局样式","平台":"mobile/PC"},{"方法名":"border-top-radius","参数":"radius","说明":"单边圆角，上边","平台":"mobile/PC"},{"方法名":"border-right-radius","参数":"radius","说明":"单边圆角，右边","平台":"mobile/PC"},{"方法名":"border-bottom-radius","参数":"radius","说明":"单边圆角，下边","平台":"mobile/PC"},{"方法名":"border-left-radius","参数":"radius","说明":"单边圆角，左边","平台":"mobile/PC"},{"方法名":"set-scroll","参数":"color","说明":"设置滚动条颜色，需要hsl颜色，如less：.setScroll(hsla(200, 100%, 54%, 1))","平台":"mobile"},{"方法名":"set-scroll-elastic","参数":"-","说明":"设置滚动区域带弹性效果(IOS)","平台":"mobile"},{"方法名":"min-width","参数":"min-width","说明":"设置最小宽度且兼容IE6","平台":"PC"},{"方法名":"min-height","参数":"min-height","说明":"设置最小高度且兼容IE6","平台":"PC"},{"方法名":"dib","参数":"-","说明":"内联块级元素, 兼容IE6","平台":"PC"},{"方法名":"fixed","参数":"-","说明":"固定定位, 兼容IE6","平台":"PC"},{"方法名":"fl","参数":"-","说明":"左浮动, 兼容 IE6","平台":"PC"},{"方法名":"fr","参数":"-","说明":"右浮动, 兼容 IE6","平台":"PC"},{"方法名":"clearfix","参数":"-","说明":"清除浮动","平台":"PC"},{"方法名":"no-select","参数":"-","说明":"禁止文字选中","平台":"PC"},{"方法名":"bg-variant","参数":"color","说明":"按钮颜色设置（hover及focus颜色加深）","平台":"PC"},{"方法名":"opacity","参数":"opacity","说明":"设置透明度，兼容 IE6","平台":"PC"}]},{"name":"样式","children":[{"name":"grid","children":[{"类/属性名":".g-box_b","属性":"`-webkit-box-sizing: border-box; box-sizing: border-box;`","说明":"对元素指定宽度和高度包括了 padding 和 border 。| mobile/PC"},{"类/属性名":".g-box_c","属性":"`-webkit-box-sizing: content-box; box-sizing: content-box;`","说明":"指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外。","平台":"mobile/PC"},{"类/属性名":".g-center","属性":"`margin-left: auto;margin-right: auto;`","说明":"块元素居中。","平台":"mobile/PC"},{"类/属性名":".g-pf","属性":"`position: fixed;`","说明":"设置固定定位","平台":"mobile/PC"},{"类/属性名":".g-pr","属性":"`position: relative;`","说明":"设置相对定位","平台":"mobile/PC"},{"类/属性名":".g-pa","属性":"`position: absolute;`","说明":"设置绝对定位","平台":"mobile/PC"},{"类/属性名":".g-fs10","属性":"`font-size: 1.3333vw;`","说明":"字体大小为10px（750px设计稿，1vw=7.5px响应式，后续移动长度单位同此）","平台":"mobile"},{"类/属性名":".g-fs12","属性":"`font-size: 1.6vw;`","说明":"字体大小为12px","平台":"mobile"},{"类/属性名":".g-fs14","属性":"`font-size: 1.8667vw;`","说明":"字体大小为14px","平台":"mobile"},{"类/属性名":".g-fs16","属性":"`font-size: 2.1333vw;`","说明":"字体大小为16px","平台":"mobile"},{"类/属性名":".g-fs18","属性":"`font-size: 2.4vw;`","说明":"字体大小为18px","平台":"mobile"},{"类/属性名":".g-fs20","属性":"`font-size: 2.6667vw;`","说明":"字体大小为20px","平台":"mobile"},{"类/属性名":".g-fs22","属性":"`font-size: 2.9333vw;`","说明":"字体大小为22px","平台":"mobile"},{"类/属性名":".g-fs24","属性":"`font-size: 3.2vw;`","说明":"字体大小为24px","平台":"mobile"},{"类/属性名":".g-fs26","属性":"`font-size: 3.4667vw;`","说明":"字体大小为26px","平台":"mobile"},{"类/属性名":".g-fs28","属性":"`font-size: 3.7333vw;`","说明":"字体大小为28px","平台":"mobile"},{"类/属性名":".g-fs30","属性":"`font-size: 4vw;`","说明":"字体大小为30px","平台":"mobile"},{"类/属性名":".g-fs32","属性":"`font-size: 4.2667vw;`","说明":"字体大小为32px","平台":"mobile"},{"类/属性名":".g-fs34","属性":"`font-size: 4.5333vw;`","说明":"字体大小为34px","平台":"mobile"},{"类/属性名":".g-fs36","属性":"`font-size: 4.8vw;`","说明":"字体大小为36px","平台":"mobile"},{"类/属性名":".g-fs38","属性":"`font-size: 5.0667vw;`","说明":"字体大小为38px","平台":"mobile"},{"类/属性名":".g-fs40","属性":"`font-size: 5.3333vw;`","说明":"字体大小为40px","平台":"mobile"},{"类/属性名":".g-lh150per","属性":"`line-height: 1.5;`","说明":"行高1.5","平台":"mobile/PC"},{"类/属性名":".g-lh180per","属性":"`line-height: 1.8;`","说明":"行高1.8","平台":"mobile/PC"},{"类/属性名":".g-lh200per","属性":"`line-height: 2;`","说明":"行高2","平台":"mobile/PC"},{"类/属性名":".g-m20","属性":"`margin: 2.6667vw;`","说明":"margin四边均为20px","平台":"mobile"},{"类/属性名":".g-m30","属性":"`margin: 4vw;`","说明":"margin四边均为30px","平台":"mobile"},{"类/属性名":".g-m40","属性":"`margin: 5.3333vw;`","说明":"margin四边均为40px","平台":"mobile"},{"类/属性名":".g-m50","属性":"`margin: 6.6667vw;`","说明":"margin四边均为60px","平台":"mobile"},{"类/属性名":".g-mt10","属性":"`margin-top: 1.3333vw;`","说明":"上边距10px","平台":"mobile"},{"类/属性名":".g-mt20","属性":"`margin-top: 2.6667vw;`","说明":"上边距20px","平台":"mobile"},{"类/属性名":".g-mt30","属性":"`margin-top: 4vw;`","说明":"上边距30px","平台":"mobile"},{"类/属性名":".g-mt40","属性":"`margin-top: 5.3333vw;`","说明":"上边距40px","平台":"mobile"},{"类/属性名":".g-mt50","属性":"`margin-top: 6.6667vw;`","说明":"上边距50px","平台":"mobile"},{"类/属性名":".g-mt60","属性":"`margin-top: 8vw;`","说明":"上边距60px","平台":"mobile"},{"类/属性名":".g-mt70","属性":"`margin-top: 9.3333vw;`","说明":"上边距70px","平台":"mobile"},{"类/属性名":".g-mt80","属性":"`margin-top: 10.6667vw;`","说明":"上边距80px","平台":"mobile"},{"类/属性名":".g-mt90","属性":"`margin-top: 12vw;`","说明":"上边距90px","平台":"mobile"},{"类/属性名":".g-mt100","属性":"`margin-top: 13.3333vw;`","说明":"上边距100px","平台":"mobile"},{"类/属性名":".g-mr10","属性":"`margin-right: 1.3333vw;`","说明":"右边距10px","平台":"mobile"},{"类/属性名":".g-mr20","属性":"`margin-right: 2.6667vw;`","说明":"右边距20px","平台":"mobile"},{"类/属性名":".g-mr30","属性":"`margin-right: 4vw;`","说明":"右边距30px","平台":"mobile"},{"类/属性名":".g-mr40","属性":"`margin-right: 5.3333vw;`","说明":"右边距40px","平台":"mobile"},{"类/属性名":".g-mr50","属性":"`margin-right: 6.6667vw;`","说明":"右边距50px","平台":"mobile"},{"类/属性名":".g-mr60","属性":"`margin-right: 8vw;`","说明":"右边距60px","平台":"mobile"},{"类/属性名":".g-mr70","属性":"`margin-right: 9.3333vw;`","说明":"右边距70px","平台":"mobile"},{"类/属性名":".g-mr80","属性":"`margin-right: 10.6667vw;`","说明":"右边距80px","平台":"mobile"},{"类/属性名":".g-mr90","属性":"`margin-right: 12vw;`","说明":"右边距90px","平台":"mobile"},{"类/属性名":".g-mr100","属性":"`margin-right: 13.3333vw;`","说明":"右边距100px","平台":"mobile"},{"类/属性名":".g-mb10","属性":"`margin-bottom: 1.3333vw;`","说明":"下边距10px","平台":"mobile"},{"类/属性名":".g-mb20","属性":"`margin-bottom: 2.6667vw;`","说明":"下边距20px","平台":"mobile"},{"类/属性名":".g-mb30","属性":"`margin-bottom: 4vw;`","说明":"下边距30px","平台":"mobile"},{"类/属性名":".g-mb40","属性":"`margin-bottom: 5.3333vw;`","说明":"下边距40px","平台":"mobile"},{"类/属性名":".g-mb50","属性":"`margin-bottom: 6.6667vw;`","说明":"下边距50px","平台":"mobile"},{"类/属性名":".g-mb60","属性":"`margin-bottom: 8vw;`","说明":"下边距60px","平台":"mobile"},{"类/属性名":".g-mb70","属性":"`margin-bottom: 9.3333vw;`","说明":"下边距70px","平台":"mobile"},{"类/属性名":".g-mb80","属性":"`margin-bottom: 10.6667vw;`","说明":"下边距80px","平台":"mobile"},{"类/属性名":".g-mb90","属性":"`margin-bottom: 12vw;`","说明":"下边距90px","平台":"mobile"},{"类/属性名":".g-mb100","属性":"`margin-bottom: 13.3333vw;`","说明":"下边距100px","平台":"mobile"},{"类/属性名":".g-ml10","属性":"`margin-left: 1.3333vw;`","说明":"左边距10px","平台":"mobile"},{"类/属性名":".g-ml20","属性":"`margin-left: 2.6667vw;`","说明":"左边距20px","平台":"mobile"},{"类/属性名":".g-ml30","属性":"`margin-left: 4vw;`","说明":"左边距30px","平台":"mobile"},{"类/属性名":".g-ml40","属性":"`margin-left: 5.3333vw;`","说明":"左边距40px","平台":"mobile"},{"类/属性名":".g-ml50","属性":"`margin-left: 6.6667vw;`","说明":"左边距50px","平台":"mobile"},{"类/属性名":".g-ml60","属性":"`margin-left: 8vw;`","说明":"左边距60px","平台":"mobile"},{"类/属性名":".g-ml70","属性":"`margin-left: 9.3333vw;`","说明":"左边距70px","平台":"mobile"},{"类/属性名":".g-ml80","属性":"`margin-left: 10.6667vw;`","说明":"左边距80px","平台":"mobile"},{"类/属性名":".g-ml90","属性":"`margin-left: 12vw;`","说明":"左边距90px","平台":"mobile"},{"类/属性名":".g-ml100","属性":"`margin-left: 13.3333vw;`","说明":"左边距100px","平台":"mobile"},{"类/属性名":"* 注意：PC版.g-fs*单位跨度从10px到40px，如.g-fs10, ... , .g-fs40；..g-mt*/.g-mr*/.g-mb*/.g-ml*单位跨度从10px到200px，如.g-mt10, ... , .g-mt200"}]},{"name":"unit","children":[{"类/属性名":".u-block","属性":"`display: block`","说明":"设置为块元素","平台":"mobile/PC"},{"类/属性名":".u-block_il","属性":"`display: inline-block`","说明":"设置为行内块元素","平台":"mobile/PC"},{"类/属性名":".u-inline","属性":"`display: inline`","说明":"设置为行内元素","平台":"mobile/PC"},{"类/属性名":".u-w","属性":"`display: block; width: 100%;`","说明":"块元素宽度100%","平台":"mobile/PC"},{"类/属性名":".u-w92per","属性":"`display: block; width: 92%;`","说明":"块元素宽度92%","平台":"mobile/PC"},{"类/属性名":".u-w50per","属性":"`display: block; width: 50%;`","说明":"块元素宽度50%","平台":"mobile/PC"},{"类/属性名":".u-w10","属性":"`width: 1.3333vw;`","说明":"宽度10px","平台":"mobile"},{"类/属性名":".u-w20","属性":"`width: 2.6667vw;`","说明":"宽度20px","平台":"mobile"},{"类/属性名":".u-w30","属性":"`width: 4vw;`","说明":"宽度30px","平台":"mobile"},{"类/属性名":".u-w40","属性":"`width: 5.3333vw;`","说明":"宽度40px","平台":"mobile"},{"类/属性名":".u-w50","属性":"`width: 6.6667vw;`","说明":"宽度50px","平台":"mobile"},{"类/属性名":".u-w60","属性":"`width: 8vw;`","说明":"宽度60px","平台":"mobile"},{"类/属性名":".u-w70","属性":"`width: 9.3333vw;`","说明":"宽度70px","平台":"mobile"},{"类/属性名":".u-w80","属性":"`width: 10.6667vw;`","说明":"宽度80px","平台":"mobile"},{"类/属性名":".u-w90","属性":"`width: 12vw;`","说明":"宽度90px","平台":"mobile"},{"类/属性名":".u-w100","属性":"`width: 13.3333vw;`","说明":"宽度100px","平台":"mobile"},{"类/属性名":".u-w150","属性":"`width: 19.9995vw`","说明":"宽度150px","平台":"mobile"},{"类/属性名":".u-w200","属性":"`width: 26.6667vw`","说明":"宽度200px","平台":"mobile"},{"类/属性名":".u-h","属性":"`height: 100%`","说明":"高度100%","平台":"mobile/PC"},{"类/属性名":".u-h10","属性":"`height: 1.3333vw;`","说明":"高度10px","平台":"mobile"},{"类/属性名":".u-h20","属性":"`height: 2.6667vw;`","说明":"高度20px","平台":"mobile"},{"类/属性名":".u-h30","属性":"`height: 4vw;`","说明":"高度30px","平台":"mobile"},{"类/属性名":".u-h40","属性":"`height: 5.3333vw;`","说明":"高度40px","平台":"mobile"},{"类/属性名":".u-h50","属性":"`height: 6.6667vw;`","说明":"高度50px","平台":"mobile"},{"类/属性名":".u-h60","属性":"`height: 8vw;`","说明":"高度60px","平台":"mobile"},{"类/属性名":".u-h70","属性":"`height: 9.3333vw;`","说明":"高度70px","平台":"mobile"},{"类/属性名":".u-h80","属性":"`height: 10.6667vw;`","说明":"高度80px","平台":"mobile"},{"类/属性名":".u-h90","属性":"`height: 12vw;`","说明":"高度90px","平台":"mobile"},{"类/属性名":".u-h100","属性":"`height: 13.3333vw;`","说明":"高度100px","平台":"mobile"},{"类/属性名":".u-h150","属性":"`height: 19.9995vw`","说明":"高度150px","平台":"mobile"},{"类/属性名":".u-h200","属性":"`height: 26.6667vw`","说明":"高度200px","平台":"mobile"},{"类/属性名":".u-p10","属性":"`padding: 1.3333vw;`","说明":"padding四边均为10px","平台":"mobile"},{"类/属性名":".u-p15","属性":"`padding: 1.99995vw;`","说明":"padding四边均为10px","平台":"mobile"},{"类/属性名":".u-p20","属性":"`padding: 2.6667vw;`","说明":"padding四边均为20px","平台":"mobile"},{"类/属性名":".u-p30","属性":"`padding: 4vw;`","说明":"padding四边均为30px","平台":"mobile"},{"类/属性名":".u-pt10","属性":"`padding-top: 1.3333vw;`","说明":"上内边距10px","平台":"mobile"},{"类/属性名":".u-pt15","属性":"`padding-top: 1.3333vw;`","说明":"上内边距15px","平台":"mobile"},{"类/属性名":".u-pt20","属性":"`padding-top: 2.6667vw;`","说明":"上内边距20px","平台":"mobile"},{"类/属性名":".u-pt30","属性":"`padding-top: 4vw;`","说明":"上内边距30px","平台":"mobile"},{"类/属性名":".u-pt40","属性":"`padding-top: 5.3333vw;`","说明":"上内边距40px","平台":"mobile"},{"类/属性名":".u-pt50","属性":"`padding-top: 6.6667vw;`","说明":"上内边距50px","平台":"mobile"},{"类/属性名":".u-pt60","属性":"`padding-top: 8vw;`","说明":"上内边距60px","平台":"mobile"},{"类/属性名":".u-pt70","属性":"`padding-top: 9.3333vw;`","说明":"上内边距70px","平台":"mobile"},{"类/属性名":".u-pt80","属性":"`padding-top: 10.6667vw;`","说明":"上内边距80px","平台":"mobile"},{"类/属性名":".u-pt90","属性":"`padding-top: 12vw;`","说明":"上内边距90px","平台":"mobile"},{"类/属性名":".u-pt100","属性":"`padding-top: 13.3333vw;`","说明":"上内边距100px","平台":"mobile"},{"类/属性名":".u-pr4per","属性":"`padding-right: 4%;`","说明":"右内边距4%","平台":"mobile/PC"},{"类/属性名":".u-pr10","属性":"`padding-right: 1.3333vw;`","说明":"右内边距10px","平台":"mobile"},{"类/属性名":".u-pr15","属性":"`padding-right: 1.3333vw;`","说明":"右内边距15px","平台":"mobile"},{"类/属性名":".u-pr20","属性":"`padding-right: 2.6667vw;`","说明":"右内边距20px","平台":"mobile"},{"类/属性名":".u-pr30","属性":"`padding-right: 4vw;`","说明":"右内边距30px","平台":"mobile"},{"类/属性名":".u-pr40","属性":"`padding-right: 5.3333vw;`","说明":"右内边距40px","平台":"mobile"},{"类/属性名":".u-pr50","属性":"`padding-right: 6.6667vw;`","说明":"右内边距50px","平台":"mobile"},{"类/属性名":".u-pr60","属性":"`padding-right: 8vw;`","说明":"右内边距60px","平台":"mobile"},{"类/属性名":".u-pr70","属性":"`padding-right: 9.3333vw;`","说明":"右内边距70px","平台":"mobile"},{"类/属性名":".u-pr80","属性":"`padding-right: 10.6667vw;`","说明":"右内边距80px","平台":"mobile"},{"类/属性名":".u-pr90","属性":"`padding-right: 12vw;`","说明":"右内边距90px","平台":"mobile"},{"类/属性名":".u-pr100","属性":"`padding-right: 13.3333vw;`","说明":"右内边距100px","平台":"mobile"},{"类/属性名":".u-pb10","属性":"`padding-bottom: 1.3333vw;`","说明":"下内边距10px","平台":"mobile"},{"类/属性名":".u-pb15","属性":"`padding-bottom: 1.3333vw;`","说明":"下内边距15px","平台":"mobile"},{"类/属性名":".u-pb20","属性":"`padding-bottom: 2.6667vw;`","说明":"下内边距20px","平台":"mobile"},{"类/属性名":".u-pb30","属性":"`padding-bottom: 4vw;`","说明":"下内边距30px","平台":"mobile"},{"类/属性名":".u-pb40","属性":"`padding-bottom: 5.3333vw;`","说明":"下内边距40px","平台":"mobile"},{"类/属性名":".u-pb50","属性":"`padding-bottom: 6.6667vw;`","说明":"下内边距50px","平台":"mobile"},{"类/属性名":".u-pb60","属性":"`padding-bottom: 8vw;`","说明":"下内边距60px","平台":"mobile"},{"类/属性名":".u-pb70","属性":"`padding-bottom: 9.3333vw;`","说明":"下内边距70px","平台":"mobile"},{"类/属性名":".u-pb80","属性":"`padding-bottom: 10.6667vw;`","说明":"下内边距80px","平台":"mobile"},{"类/属性名":".u-pb90","属性":"`padding-bottom: 12vw;`","说明":"下内边距90px","平台":"mobile"},{"类/属性名":".u-pb100","属性":"`padding-bottom: 13.3333vw;`","说明":"下内边距100px","平台":"mobile"},{"类/属性名":".u-pl4per","属性":"`padding-left: 4%;`","说明":"左内边距4%","平台":"mobile/PC"},{"类/属性名":".u-pl10","属性":"`padding-left: 1.3333vw;`","说明":"左内边距10px","平台":"mobile"},{"类/属性名":".u-pl15","属性":"`padding-left: 1.3333vw;`","说明":"左内边距15px","平台":"mobile"},{"类/属性名":".u-pl20","属性":"`padding-left: 2.6667vw;`","说明":"左内边距20px","平台":"mobile"},{"类/属性名":".u-pl30","属性":"`padding-left: 4vw;`","说明":"左内边距30px","平台":"mobile"},{"类/属性名":".u-pl40","属性":"`padding-left: 5.3333vw;`","说明":"左内边距40px","平台":"mobile"},{"类/属性名":".u-pl50","属性":"`padding-left: 6.6667vw;`","说明":"左内边距50px","平台":"mobile"},{"类/属性名":".u-pl60","属性":"`padding-left: 8vw;`","说明":"左内边距60px","平台":"mobile"},{"类/属性名":".u-pl70","属性":"`padding-left: 9.3333vw;`","说明":"左内边距70px","平台":"mobile"},{"类/属性名":".u-pl80","属性":"`padding-left: 10.6667vw;`","说明":"左内边距80px","平台":"mobile"},{"类/属性名":".u-pl90","属性":"`padding-left: 12vw;`","说明":"左内边距90px","平台":"mobile"},{"类/属性名":".u-pl100","属性":"`padding-left: 13.3333vw;`","说明":"左内边距100px","平台":"mobile"},{"类/属性名":".u-flex","属性":"`display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;`","说明":"设置flex布局","平台":"mobile/PC"},{"类/属性名":".u-s-middle","属性":"`display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-justify-content: space-around; justify-content: space-around; -webkit-align-items: center; align-items: center;`","说明":"垂直居中，水平距两端留白平铺","平台":"mobile/PC"},{"类/属性名":".u-l-middle","属性":"`display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center;`","说明":"垂直居中，水平靠左","平台":"mobile/PC"},{"类/属性名":".u-c-middle","属性":"`display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center;`","说明":"垂直居中，水平居中","平台":"mobile/PC"},{"类/属性名":".u-j-middle","属性":"`display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between;`","说明":"垂直居中，水平贴两端平铺","平台":"mobile/PC"},{"类/属性名":".u-r-middle","属性":"`display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end;`","说明":"垂直居中，水平靠右","平台":"mobile/PC"},{"类/属性名":"* 注意：PC版.u-w*/.u-h*/.u-pt*/.u-pr*/.u-pb*/.u-pl*单位跨度从10px到200px，如.u-w10, ... , .u-w200"}]},{"name":"function","children":[{"类/属性名":".f-wk_reset","属性":"`-webkit-appearance: none;`","说明":"清除webkit默认样式","平台":"mobile/PC"},{"类/属性名":".f-bg_cover, [f-bg_cover]","属性":"`background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%;`","说明":"背景图片填充整个容器","平台":"mobile/PC"},{"类/属性名":".f-ovhidden","属性":"`overflow: hidden;`","说明":"溢出隐藏","平台":"mobile/PC"},{"类/属性名":".f-scroll_y","属性":"`overflow-y: auto;`","说明":"竖向滚动条自动","平台":"mobile/PC"},{"类/属性名":".f-ellipsis","属性":"`white-space: nowrap; text-overflow: ellipsis; overflow: hidden;`","说明":"单行文字超出显示'...'","平台":"mobile/PC"},{"类/属性名":".f-equal","属性":"`margin-bottom: -9999px; padding-bottom: 9999px;`","说明":"多列等高","平台":"mobile/PC"},{"类/属性名":".f-tl","属性":"`text-align: left;`","说明":"文字左对齐","平台":"mobile/PC"},{"类/属性名":".f-tc","属性":"`text-align: center;`","说明":"文字居中对齐","平台":"mobile/PC"},{"类/属性名":".f-tr","属性":"`text-align: right;`","说明":"文字右对齐","平台":"mobile/PC"},{"类/属性名":".f-tj","属性":"`-webkit-margin-start: 0; -webkit-margin-end: 0; text-align: justify;`","说明":"文字两端对齐","平台":"mobile/PC"},{"类/属性名":".f-vt","属性":"`vertical-align: top;`","说明":"行元素垂直对齐方式为顶部","平台":"mobile/PC"},{"类/属性名":".f-vm","属性":"`vertical-align: middle;`","说明":"行元素垂直对齐方式为居中","平台":"mobile/PC"},{"类/属性名":".f-vb","属性":"`vertical-align: bottom;`","说明":"行元素垂直对齐方式为居底","平台":"mobile/PC"},{"类/属性名":".f-fl","属性":"`float: left; display: inline;`","说明":"左浮动","平台":"mobile/PC"},{"类/属性名":".f-fr","属性":"`float: right; display: inline;`","说明":"右浮动","平台":"mobile/PC"},{"类/属性名":".f-cb","属性":"`clear: both;`","说明":"两侧请浮动","平台":"mobile/PC"},{"类/属性名":".f-cl","属性":"`clear: left;`","说明":"左侧请浮动","平台":"mobile/PC"},{"类/属性名":".f-cr","属性":"`clear: right;`","说明":"右侧请浮动","平台":"mobile/PC"},{"类/属性名":".f-nowrap","属性":"`white-space: nowrap;`","说明":"保持文字不换行","平台":"mobile/PC"},{"类/属性名":".f-normal","属性":"`font-weight: normal;`","说明":"字体大小为普通","平台":"mobile/PC"},{"类/属性名":".f-bold","属性":"`font-weight: bold;`","说明":"文字大小为粗体","平台":"mobile/PC"},{"类/属性名":".f-ti2","属性":"`text-indent: 2em;`","说明":"段落首行缩进2个字符","平台":"mobile/PC"},{"类/属性名":".f-ft_italic","属性":"`font-style: italic;`","说明":"文字斜体","平台":"mobile/PC"},{"类/属性名":".f-unl","属性":"`text-decoration: underline;`","说明":"文字加下划线","平台":"mobile/PC"},{"类/属性名":".f-unl_none","属性":"`text-decoration: none;`","说明":"文字取消下划线","平台":"mobile/PC"},{"类/属性名":".f-bdr10","属性":"`border-radius: 5px;`","说明":"圆角5px，移动为10px","平台":"mobile/PC"},{"类/属性名":".f-bdr8","属性":"`border-radius: 4px;`","说明":"圆角4px，移动为8px","平台":"mobile/PC"},{"类/属性名":".f-clear","属性":"`height: 0px; line-height: 0px; font-size: 0px; clear: both; overflow: hidden; zoom: 1;`","说明":"清浮动","平台":"PC"},{"类/属性名":".f-tap_reset","属性":"`-webkit-tap-highlight-color: rgba(0, 0, 0, 0);`","说明":"取消移动端触控蒙层","平台":"mobile"},{"类/属性名":".f-song_font","属性":"`font-family: \"宋体\";`","说明":"使用宋体文字","平台":"PC"},{"类/属性名":".f-yahei_font","属性":"`font-family: \"Microsoft Yahei\";`","说明":"使用微软雅黑文字","平台":"PC"},{"类/属性名":".f-event_none","属性":"`pointer-events: none;`","说明":"事件穿透","平台":"mobile/PC (`0.9.2`起)"},{"类/属性名":".f-inline_wrap","属性":"`content: \"\\A\"; white-space: pre;`","说明":"使行内元素换行","平台":"mobile/PC(`0.9.2`起)"},{"类/属性名":".f-cursor_p","属性":"`cursor: pointer`","说明":"鼠标覆盖交互为链接效果","平台":"PC(`0.9.2`起)"},{"类/属性名":".f-cursor_none","属性":"`cursor: default`","说明":"鼠标覆盖交互为默认鼠标效果","平台":"PC(`0.9.2`起)"},{"类/属性名":".f-cursor_not","属性":"`cursor: not-allowed`","说明":"鼠标覆盖交互为禁止效果","平台":"PC(`0.9.2`起)"},{"类/属性名":".f-noselect","属性":"`-webkit-user-select: none; user-select: none;`","说明":"禁止文字选中","平台":"mobile/PC（`0.9.4`起）"}]},{"name":"component","children":[{"类/属性名":".u-icon, .u-btn","属性":"`display: block;`","说明":"按钮/图标设置为块元素","平台":"mobile/PC"},{"类/属性名":".u-icon_il, .u-btn_il","属性":"`display: inline-block;`","说明":"按钮/图标设置为行内块元素","平台":"mobile/PC"},{"类/属性名":".f-pclass","属性":"`position: relative;&:before,&:after {position: absolute;content: '';}`","说明":"设置伪元素，通常用作图形或1px边框","平台":"mobile/PC"},{"类/属性名":".f-b_1px","属性":"`position: relative; &:after{ position: absolute; content: ''; background-color: @border-gray;}`","说明":"设置retina屏幕边框1px，需要配合.bt_1px/.br_1px/.bb_1px/.bl_1px使用","平台":"mobile/PC"},{"类/属性名":".bt_1px","属性":"`left: 0; width: 100%; height: 1px; -webkit-transform: scale(1, 0.5); transform: scale(1, 0.5); top: 0;`","说明":"设置上边框1px","平台":"mobile/PC"},{"类/属性名":".bb_1px","属性":"`left: 0; width: 100%; height: 1px; -webkit-transform: scale(1, 0.5); transform: scale(1, 0.5); bottom: 0;`","说明":"设置下边框1px","平台":"mobile/PC"},{"类/属性名":".br_1px","属性":"`top: 0; width: 1px; height: 100%; -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); right: 0;`","说明":"设置右边框1px","平台":"mobile/PC"},{"类/属性名":".bl_1px","属性":"`top: 0; width: 1px; height: 100%; -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); left: 0;`","说明":"设置左边框1px","平台":"mobile/PC"},{"类/属性名":".u-btn, .u-btn_il","属性":"`padding: 0; text-align: center; border-radius: 4px;`","说明":"设置按钮基础样式，赋值样式见下表button","平台":"mobile/PC"},{"类/属性名":".u-mask","属性":"`z-index: 18; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; background-color: rgba(0, 0, 0, 0.3);`","说明":"固定黑色蒙层","平台":"mobile/PC"},{"类/属性名":".u-win, .u-dialog","属性":"`position: fixed; z-index: 19; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);`","说明":"弹窗基础样式","平台":"mobile/PC"},{"name":"button(component)","children":[{"*为.u-btn/.u-btn_il的附加样式":"类/属性名"},{"*为.u-btn/.u-btn_il的附加样式":"[no-bdr]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"yellow\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"orange\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"red\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"gray\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"bd_gray\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"bd_white\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"bd_yellow\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"bd_red\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"small\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"medium\"]"},{"*为.u-btn/.u-btn_il的附加样式":"[s-color=\"big\"]"}]}]},{"name":"skin","children":[{"类/属性名":"[s-cr_red]","属性":"`color: #fe5d4e;`","说明":"字体颜色为红色","平台":"mobile/PC"},{"类/属性名":"[s-cr_green]","属性":"`color: #009801;`","说明":"字体颜色为绿色","平台":"mobile/PC"},{"类/属性名":"[s-cr_blue]","属性":"`color: #01a2fc;`","说明":"字体颜色为蓝色","平台":"mobile/PC"},{"类/属性名":"[s-cr_gray]","属性":"`color: #999;`","说明":"字体颜色为灰色","平台":"mobile/PC"},{"类/属性名":"[s-cr_white]","属性":"`color: #fff;`","说明":"字体颜色为白色","平台":"mobile/PC"},{"类/属性名":"[s-ft_base]","属性":"`color: #323232;`","说明":"字体颜色为文本基础颜色","平台":"mobile/PC"},{"类/属性名":"[s-ft_base_]","属性":"`color: #333;`","说明":"字体颜色为文本第二种基础颜色","平台":"mobile/PC"},{"类/属性名":"[s-ft_sub]","属性":"`color: #666;`","说明":"字体颜色为次文字颜色","平台":"mobile/PC"},{"类/属性名":"[s-ft_sub_]","属性":"`color: #999;`","说明":"字体颜色为第二种次文字颜色","平台":"mobile/PC"},{"类/属性名":"[s-bgc_red]","属性":"`background-color: #fe5d4e;`","说明":"背景颜色为红色","平台":"mobile/PC"},{"类/属性名":"[s-bgc_green]","属性":"`background-color: #009801;`","说明":"背景颜色为绿色","平台":"mobile/PC"},{"类/属性名":"[s-bgc_blue]","属性":"`background-color: #01a2fc;`","说明":"背景颜色为蓝色","平台":"mobile/PC"},{"类/属性名":"[s-bgc_gray]","属性":"`background-color: #999;`","说明":"背景颜色为灰色","平台":"mobile/PC"},{"类/属性名":"[s-bgc_white]","属性":"`background-color: #fff;`","说明":"背景颜色为白色","平台":"mobile/PC"}]},{"name":"status","children":[{"类/属性名":".z-hide","属性":"`display: none !important;`","说明":"元素隐藏，**最高优先级**","平台":"mobile/PC"},{"类/属性名":".z-v_hidden","属性":"`visibility: hidden;`","说明":"元素视觉隐藏","平台":"mobile/PC"},{"类/属性名":".z-v_visible","属性":"`visibility: visible;`","说明":"元素视觉显示","平台":"mobile/PC"},{"类/属性名":".z-hide_0","属性":"`opacity: 0;`","说明":"透明度为0","平台":"mobile/PC"},{"类/属性名":".z-hide_30","属性":"`opacity: 30;`","说明":"透明度为30%（PC带有filter:aplpha(opacity=透明度)兼容处理，下面的相同）","平台":"mobile/PC"},{"类/属性名":".z-hide_60","属性":"`opacity: 60;`","说明":"透明度为60%","平台":"mobile/PC"},{"类/属性名":".z-hide_90","属性":"`opacity: 90;`","说明":"透明度为90%","平台":"mobile/PC"},{"类/属性名":".z-index_","属性":"`z-index: -1;`","说明":"z轴层级为-1","平台":"mobile/PC"},{"类/属性名":".z-index_999","属性":"`z-index: 999;`","说明":"z轴层级为999","平台":"mobile/PC"}]}]}]}]
\ No newline at end of file
diff --git a/datas/regex.json b/datas/regex.json
new file mode 100644
index 00000000..64c6d110
--- /dev/null
+++ b/datas/regex.json
@@ -0,0 +1,247 @@
+[{
+ "id": "mail",
+ "name": "邮箱",
+ "description": "只允许英文字母、数字、下划线、英文句号、以及中划线组成",
+ "regexStr": "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$"
+ },
+ {
+ "id": "phone",
+ "name": "手机号",
+ "description": "",
+ "regexStr": "^1(3|4|5|6|7|8|9)\\d{9}$"
+ },
+ {
+ "id": "tel",
+ "name": "电话",
+ "description": "固定电话",
+ "regexStr": "(\\(\\d{3,4}\\)|\\d{3,4}-|\\s)?\\d{8}"
+ },
+ {
+ "id": "url",
+ "name": "URL地址",
+ "description": "",
+ "regexStr": "^((http:\/\/)|(https:\/\/))?([a-zA-Z0-9]([a-zA-Z0-9\\-]{0,61}[a-zA-Z0-9])?\\.)+[a-zA-Z]{2,6}(\/?)"
+ },
+ {
+ "id": "ipv4",
+ "name": "IP",
+ "description": "符合IPV4",
+ "regexStr": "^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$"
+ },
+ {
+ "id": "ipv6",
+ "name": "IP",
+ "description": "符合IPV6",
+ "regexStr": "^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$"
+ },
+ {
+ "id": "userName",
+ "name": "用户名",
+ "description": "字母开头，允许5-16字节，允许字母数字下划线",
+ "regexStr": "^[a-zA-Z][a-zA-Z0-9_]{4,15}$"
+ },
+ {
+ "id": "chinese",
+ "name": "中文",
+ "description": "",
+ "regexStr": "^[\u4e00-\u9fa5]{1,}$"
+ },
+ {
+ "id": "Integer",
+ "name": "整数数字",
+ "description": "",
+ "regexStr": "^-?[1-9]\\d*$"
+ },
+ {
+ "id": "PositiveInteger",
+ "name": "正整数数字",
+ "description": "",
+ "regexStr": "^[1-9]\\d*$"
+ },
+ {
+ "id": "NegativeInteger",
+ "name": "负整数数字",
+ "description": "",
+ "regexStr": "^-[1-9]\\d*$"
+ },
+ {
+ "id": "number4",
+ "name": "非负整数数字",
+ "description": "",
+ "regexStr": "^[1-9]\\d*|0$"
+ },
+ {
+ "id": "number5",
+ "name": "非正整数数字",
+ "description": "",
+ "regexStr": "^-[1-9]\\d*|0$"
+ },
+ {
+ "id": "Positivenumber",
+ "name": "零和正数",
+ "description": "",
+ "regexStr": "^\\d*\\.?\\d+$"
+ },
+ {
+ "id": "Negativenumber",
+ "name": "负数",
+ "description": "",
+ "regexStr": "^-\\d*\\.?\\d+$"
+ },
+ {
+ "id": "number6",
+ "name": "浮点数",
+ "description": "不能为整数",
+ "regexStr": "^-?([1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*|0?\\.0+|0)$"
+ },
+ {
+ "id": "number7",
+ "name": "正浮点数",
+ "description": "不能为整数",
+ "regexStr": "^[1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*$"
+ },
+ {
+ "id": "number8",
+ "name": "负浮点数",
+ "description": "不能为整数",
+ "regexStr": "^-([1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*)$"
+ },
+ {
+ "id": "number9",
+ "name": "非负浮点数",
+ "description": "不能为整数",
+ "regexStr": "^[1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*|0?\\.0+|0$"
+ },
+ {
+ "id": "number10",
+ "name": "非正浮点数",
+ "description": "不能为整数",
+ "regexStr": "^(-([1-9]\\d*\\.\\d*|0\\.\\d*[1-9]\\d*))|0?\\.0+|0$"
+ },
+ {
+ "id": "englishAndNumber",
+ "name": "英文和数字",
+ "description": "",
+ "regexStr": "^[A-Za-z0-9]+$"
+ },
+ {
+ "id": "englishAndNumberAndLine",
+ "name": "中文英文数字或下划线",
+ "description": "由中文、数字、26个英文字母或者下划线组成的字符串",
+ "regexStr": "^[\u4E00-\u9FA5A-Za-z0-9_]+$"
+ },
+ {
+ "id": "chineseAndEnglishAndNumberAndLine",
+ "name": "中文英文数字或下划线",
+ "description": "中文、英文、数字包括下划线",
+ "regexStr": "^\\w+$"
+ },
+ {
+ "id": "chineseAndEnglishAndNumberNotLine",
+ "name": "中文英文数字无符号",
+ "description": "中文、英文、数字但不包括下划线等符号",
+ "regexStr": "^[\u4E00-\u9FA5A-Za-z0-9]+$"
+ },
+ {
+ "id": "lengthExample",
+ "name": "长度限制",
+ "description": "长度为6～8，任意字符",
+ "regexStr": "^.{6,8}$"
+ },
+ {
+ "id": "english",
+ "name": "英文",
+ "description": "由26个英文字母组成的字符串",
+ "regexStr": "^[A-Za-z]+$"
+ },
+ {
+ "id": "english2",
+ "name": "英文",
+ "description": "由26个大写英文字母组成的字符串",
+ "regexStr": "^[A-Z]+$"
+ },
+ {
+ "id": "english3",
+ "name": "英文",
+ "description": "由26个小写英文字母组成的字符串",
+ "regexStr": "^[a-z]+$"
+ },
+ {
+ "id": "noSymbol1",
+ "name": "禁止符号",
+ "description": "禁止输入含有%&\",;=?$\"等字符",
+ "regexStr": "[^%&\",;=?$\\x22]+"
+ },
+ {
+ "id": "noWave",
+ "name": "禁止~符号",
+ "description": "禁止输入含有~的字符",
+ "regexStr": "[^~\\x22]+"
+ },
+ {
+ "id": "dateFormat",
+ "name": "日期格式",
+ "description": "日期格式符合mm/dd/yyyy规范",
+ "regexStr": "^(0?[1-9]|[12][0-9]|3[01])([\/\\-])(0?[1-9]|1[012])\\2([0-9][0-9][0-9][0-9])(([-])([0-1]?[0-9]|2[0-3]):[0-5]?[0-9]:[0-5]?[0-9])?$"
+ },
+ {
+ "id": "timeFormat",
+ "name": "时间格式hh:mm",
+ "description": "时间格式符合24小时格式规范",
+ "regexStr": "^([01]?[0-9]|2[0-3]):[0-5][0-9]$"
+ },
+ {
+ "id": "md5",
+ "name": "MD5",
+ "description": "32位MD5字符串",
+ "regexStr": "^[a-f0-9]{32}$"
+ },
+ {
+ "id": "base64",
+ "name": "BASE64",
+ "description": "BASE64字符串",
+ "regexStr": "^\\s*data:(?:[a-z]+\/[a-z0-9-+.]+(?:;[a-z-]+=[a-z0-9-]+)?)?(?:;base64)?,([a-z0-9!$&',()*+;=\\-._~:@\/?%\\s]*?)\\s*$"
+ },
+ {
+ "id": "hexColor",
+ "name": "十六进制颜色",
+ "description": "",
+ "regexStr": "^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$"
+ },
+ {
+ "id": "video",
+ "name": "视频文件",
+ "description": "",
+ "regexStr": ".*?(?:swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4)$"
+ },
+ {
+ "id": "image",
+ "name": "图片文件",
+ "description": "",
+ "regexStr": ".*?(?:gif|png|jpg|jpeg|webp|svg|psd|bmp|tif)$"
+ },
+ {
+ "id": "newEnergyLicense",
+ "name": "新能源车牌",
+ "description": "",
+ "regexStr": "[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$"
+ },
+ {
+ "id": "license",
+ "name": "普通车牌",
+ "description": "新能源车+非新能源车",
+ "regexStr": "^(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(?:(?:[0-9]{5}[DF])|(?:[DF](?:[A-HJ-NP-Z0-9])[0-9]{4})))|(?:[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$"
+ },
+ {
+ "id": "A-SHARE",
+ "name": "股票-A股",
+ "description": "股票代码",
+ "regexStr": "^(s[hz]|S[HZ])(000[\\d]{3}|002[\\d]{3}|300[\\d]{3}|600[\\d]{3}|60[\\d]{4})$"
+ },
+ {
+ "id": "wechatId",
+ "name": "微信号",
+ "description": "",
+ "regexStr": "^[a-zA-Z][-_a-zA-Z0-9]{5,19}$"
+ }
+]
\ No newline at end of file
diff --git a/datas/tools.json b/datas/tools.json
new file mode 100644
index 00000000..f11bde72
--- /dev/null
+++ b/datas/tools.json
@@ -0,0 +1 @@
+[{"name":"常用网站","children":[{"name":"HTML/CSS/JavaScript/WASM/Dart","children":[{"name":"MDN 文档手册","desc":"Mozilla出品的一个很全很有用的前端查询/学习网站。","link":"https://developer.mozilla.org/zh-CN/docs/Web","target":["html","css","js"]},{"name":"MDN AI助手","desc":"基于gpt3.5的MDN文档问答机器人。","link":"https://developer.mozilla.org/en-US/plus/ai-help","target":["html","css","js"]},{"name":"W3C官网","desc":"W3C官方标准。","link":"https://www.w3.org/","target":["html","css","js"]},{"name":"W3C学习网站","desc":"W3C School，国际热门的web开发学习网站，适合入门。","link":"https://www.w3schools.com/","target":["w3cshool"]},{"name":"W3C CSS","desc":"W3C CSS规范文档。","link":"https://www.w3.org/Style/CSS/","target":["w3c-css"]},{"name":"css属性参考手册","desc":"快速查询css属性及基本使用。","link":"https://www.runoob.com/cssref/css-reference.html","target":["css"]},{"name":"canvas api速查手册","desc":"canvas API方法集合。","link":"https://www.canvasapi.cn/","target":["canvas"]},{"name":"W3C官网-SVG","desc":"W3C官网，SVG文档（左侧RECOMMENDATIONS）。","link":"https://www.w3.org/Graphics/SVG/","target":["svg"]},{"name":"VML 参考手册","desc":"*早期（如果你仍要兼容IE6/7）微软开发的在低端IE上运行的图形绘制DSL、类似“SVG”。","link":"http://www.t086.com/code/vml/","target":["VML(IE)"]},{"name":"TypeScript官方手册","desc":"TypeScript官方手册。","link":"https://www.typescriptlang.org/docs/handbook/intro.html","target":["typescript"]},{"name":"TypeScript Challenges","desc":"TypeScript Challenges，在线学习/检验自己的ts类型编程水平。","link":"https://github.com/type-challenges/type-challenges","target":["ts-challenges"]},{"name":"ECMA standards ","desc":"ECMAScript 协议标准。","link":"https://www.ecma-international.org/publications-and-standards/standards/","target":["ecma"]},{"name":"ECMA International(6)","desc":"ECMAScript6官方文档。","link":"https://www.ecma-international.org/ecma-262/6.0/","target":["ES6"]},{"name":"ECMA International(6) 汉化 ","desc":"ECMAScript6官方文档的中文翻译版（只有少部分且挺久没更新了）。","link":"https://ecma262.docschina.org/","target":["ES6"]},{"name":"ECMA6 features ","desc":"通俗易懂的ECMAScript6特性demos。","link":"http://es6-features.org/","target":["ES6"]},{"name":"ES6入门（阮一峰）","desc":"国内使用频率最高的ECMAScript6文档，特别适合新手。","link":"https://es6.ruanyifeng.com/","target":["ES6"]},{"name":"Web API Reference","desc":"HTML5 web API查询，如摄像头/地理位置。","link":"http://www.html5plus.org/doc/h5p.html","target":["html5"]},{"name":"Safari HTML Ref查询","desc":"Safari webview的HTML标签查询，用于移动web开发，比如某些iOS特殊的属性或表现可以查这个。","link":"https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect","target":["html"]},{"name":"WebKit 特性状态查询","desc":"WebKit 官网文档，js/css特性状态支持情况查询。","link":"https://webkit.org/status/","target":["webkit"]},{"name":"Dart官网","desc":"dart语言英文官网。","link":"https://dart.dev/","target":["dart"]},{"name":"Dart中文网","desc":"dart语言中文学习网。","link":"https://www.dartcn.com/guides/language/language-tour","target":["dart"]},{"name":"RFC规范官网","desc":"RFC协议官网，可查询HTTP协议等内容。","link":"https://www.rfc-editor.org/","target":["rfc","http"]},{"name":"Media Types","desc":"媒体类型列表，MIME。","link":"https://www.iana.org/assignments/media-types/media-types.xhtml","target":["MIME"]},{"name":"Web Assembly官网","desc":"Web Assembly(wasm)英文官网。","link":"https://webassembly.org/","target":["wasm"]},{"name":"Web Assembly中文网","desc":"Web Assembly(wasm)中文网。","link":"https://www.wasm.com.cn/","target":["wasm"]},{"name":"Krustlet 官网","desc":"一款 Web Assembly 框架。","link":"https://docs.krustlet.dev/","target":["krustlet"]}]},{"name":"兼容/查询","children":[{"name":"can i use","desc":"使用频率最高的兼容支持查询网站。","link":"https://caniuse.com/","target":["caniuse"]},{"name":"ES兼容查询","desc":"ECMAScript兼容查询。","link":"https://github.com/compat-table/compat-table","target":["js"]},{"name":"微信小程序ES兼容查询","desc":"微信小程序ES api及对应小程序环境版本兼容查询。","link":"https://wechat-miniprogram.github.io/miniprogram-compat/","target":["weapp"]},{"name":"iOS字体","desc":"iOS系统自带字体支持情况查询。","link":"http://iosfonts.com/","target":["ios font"]},{"name":"Web安全色查询","desc":"*为了尽量让用户看到色彩相同的网页,请尽量使用216色的web安全色。","link":"https://www.bootcss.com/p/websafecolors/","target":["web color"]},{"name":"StatCounter浏览器份额统计","desc":"*StatCounter的浏览器统计报表","link":"https://gs.statcounter.com/","target":["statcounter"]},{"name":"浏览器份额统计","desc":"*百度统计的市面上浏览器/app份额（现在已经没有了，只剩百度统计产品）。","link":"http://tongji.baidu.com/data/browser","target":["browser"]}]},{"name":"CSS工具","children":[{"name":"预处理","children":[{"name":"less文档","desc":"易上手的CSS预处理工具。","link":"https://lesscss.org/","target":["less"]},{"name":"sass 文档","desc":"热门的CSS预处理工具。","link":"https://sass-guidelin.es/zh/","target":["sass"]},{"name":"stylus 文档","desc":"功能丰富的CSS预处理工具。","link":"http://stylus-lang.com/","target":["stylus"]},{"name":"stylus 文档(张旭鑫)","desc":"stylus中文文档。","link":"http://www.zhangxinxu.com/jq/stylus/","target":["stylus"]},{"name":"Assembler CSS 文档","desc":"Assembler CSS 官方文档，Just-in-time。","link":"https://asmcss.com/","target":["asmcss"]}]},{"name":"后处理","children":[{"name":"postcss 文档","desc":"被广泛运用的CSS后处理工具。","link":"http://api.postcss.org/","target":["postcss"]},{"name":"postcss 插件","desc":"post插件库中心。","link":"https://github.com/postcss/postcss","target":["postcss"]},{"name":"autoprefixer","desc":"自动补充浏CSS前缀的后处理工具。","link":"https://github.com/postcss/autoprefixer","target":["autoprefixer"]},{"name":"cssnano官网","desc":"CSS优化和分解插件。","link":"https://cssnano.co/","target":["cssnano"]},{"name":"postcss-plugin-px2rem","desc":"将px单位转为rem单位的工具。","link":"https://www.npmjs.com/package/postcss-plugin-px2rem","target":["px2rem"]},{"name":"postcss-px-to-viewport","desc":"将px单位转为vw单位的工具。","link":"https://www.npmjs.com/package/postcss-px-to-viewport","target":["px2vw"]},{"name":"cssnext官网","desc":"让今天的我们写着明天的CSS特性。","link":"https://cssnext.github.io/","target":["cssnext"]}]},{"name":"样式库/模块","children":[{"name":"30s-of-code(css)","desc":"常用CSS样式模块集合，30s of code系列。","link":"https://css.30secondsofcode.org/","target":["30s-of-code(css)"]},{"name":"animate.css","desc":"CSS3动画库。","link":"https://daneden.github.io/animate.css/","target":["bulma.css"]},{"name":"Hover.css","desc":"PC鼠标hover交互动画库。","link":"http://ianlunn.github.io/Hover/","target":["Hover.css"]},{"name":"bulma.css","desc":"一款轻量级的CSS UI库。","link":"https://bulma.io/","target":["bulma.css"]},{"name":"cardinal.css","desc":"一款移动优先的less库。","link":"http://cardinalcss.com/","target":["cardinal.css"]},{"name":"bootflat.css","desc":"一款扁平化风格scss库，基于BootStrap3.3。","link":"http://bootflat.github.io/index.html","target":["bootflat.css"]},{"name":"corpus.css","desc":"一款scss集合库。","link":"https://jamiewilson.io/corpus/","target":["corpus.css"]},{"name":"weui","desc":"微信风格的样式库，腾讯。","link":"https://github.com/Tencent/weui","target":["weui"]},{"name":"materialize.css","desc":"Material风格的响应式前端样式框架。","link":"http://www.materializecss.cn/","target":["materializecss"]},{"name":"mui.css","desc":"Material风格的轻量级前端样式框架。","link":"https://www.muicss.com","target":["MUI"]},{"name":"Metro UI","desc":"一款流行的响应式前端样式框架，[React版](https://react.metroui.org.ua/)。","link":"https://metroui.org.ua/","target":["Metro UI"]},{"name":"NES.css","desc":"游戏机像素风格的前端样式框架。","link":"https://nostalgic-css.github.io/NES.css/","target":["NES.css"]},{"name":"paper.css","desc":"手绘风格的前端样式框架。","link":"https://www.getpapercss.com","target":["paper.css"]},{"name":"css3 icon","desc":"纯CSS实现的图标。","link":"http://www.uiplayground.in/css3-icons/","target":["css3 icon"]},{"name":"Bootstrap 文档","desc":"红极一时的响应式前端样式框架。","link":"http://bootstrap.css88.com/css/","target":["bootstrap"]},{"name":"layui 文档","desc":"一款采用自身模块规范编写的前端 UI 框架。","link":"https://www.layui.com/doc/","target":["layui"]},{"name":"fontawesome","desc":"字体图标库。","link":"https://fontawesome.com/","target":["fontawesome"]},{"name":"iconfont","desc":"字体图标库，阿里。","link":"https://www.iconfont.cn/","target":["iconfont"]},{"name":"normalize","desc":"相对较优的CSS reset替代方案。","link":"http://necolas.github.io/normalize.css/","target":["normalize"]},{"name":"Tailwind官网","desc":"模块化的UI库。","link":"https://tailwindcss.com/","target":["tailwind"]},{"name":"Unocss官网","desc":"原子、按需的css模块化引擎、有借鉴tailwind。","link":"https://unocss.dev/","target":["unocss"]}]},{"name":"其他","children":[{"name":"css tricks","desc":"包括布局、图标、动画等CSS技巧。","link":"https://qishaoxuan.github.io/css_tricks/","target":["css tricks"]},{"name":"BEM","desc":"BEM写法规范。","link":"https://en.bem.info/methodology/quick-start/","target":["bem"]},{"name":"ACSS","desc":"Atomic CSS，一种模块化写法规范。","link":"https://acss.io/","target":["acss"]},{"name":"IT.css","desc":"IT CSS，一种组件化写法规范。","link":"https://csswizardry.net/talks/2014/11/itcss-dafed.pdf","target":["itcss"]},{"name":"CSS modules","desc":"一种CSS样式模块化的解决方案。","link":"https://glenmaddern.com/articles/css-modules","target":["css-modules"]},{"name":"css in js","desc":"用写js的方式生成css样式。","link":"https://github.com/MicheleBertoli/css-in-js","target":["css-in-js"]},{"name":"Moo-CSS","desc":"一种CSS写法方案。","link":"http://blog.michealwayne.cn/Moo-CSS/docs/moocss/#m%E6%A8%A1%E5%9D%97","target":["moo-css"]},{"name":"CSS tricks for web developers","desc":"CSS技巧集合。","link":"https://github.com/l-hammer/You-need-to-know-css","target":["You-need-to-know-css"]},{"name":" logotyp.us ","desc":"国内外知名企业/商业的logo集合。","link":"https://logotyp.us/","target":["logotyp"]}]}]},{"name":"JS插件/库","children":[{"name":"库","children":[{"name":"LoDash","desc":"广为人知的函数式工具库。","link":"https://lodash.com/docs/","target":["lodash"]},{"name":"ramda","desc":"比较著名的函数式工具库。","link":"https://github.com/ramda/ramda","target":["ramda"]},{"name":"fp-ts","desc":"遵循函数式编程范式的ts封装库。","link":"https://gcanti.github.io/fp-ts/","target":["fp-ts"]},{"name":"radash","desc":"ts函数式工具库。","link":"https://github.com/rayepps/radash","target":["radash"]},{"name":"UnderscoreJS","desc":"红极一时的函数式工具库。","link":"https://underscorejs.org/","target":["underscorejs"]},{"name":"jQueryJs","desc":"早年红极一时的js封装库。","link":"http://www.css88.com/jqapi-1.9/","target":["jQuery"]},{"name":"ZeptoJs","desc":"轻量级“jQuery”，移动端使用的比较多。","link":"http://www.css88.com/doc/zeptojs_api/","target":["Zepto"]},{"name":"city.js","desc":"全国行政区划分数据文件。","link":"https://github.com/basecss/city","target":["city"]},{"name":"phaser.js","desc":"2D游戏前端库。","link":"http://phaser.io/","target":["phaser"]},{"name":"fabric.js","desc":"有名的svg和canvas相互转换的封装库。","link":"http://fabricjs.com/","target":["fabricjs"]},{"name":"babylon.js","desc":"有名的3D游戏/视频框架。","link":"https://www.babylonjs.com/","target":["babylonjs"]},{"name":"immutable-js","desc":"生产环境js的List, Stack, Map, OrderedMap, Set, OrderedSet以及Record数据结构支持，通常用于ReactJs。","link":"https://immutable-js.github.io/immutable-js/","target":["immutable"]},{"name":"GCanvas","desc":"轻量的跨平台图形引擎（web/weex/react-native），阿里。","link":"https://github.com/alibaba/GCanvas","target":["gcanvas"]},{"name":"core-decorators","desc":"丰富的装饰器封装库，基于ES2016/2017的装饰器语法。","link":"https://github.com/jayphelps/core-decorators","target":["core-decorators"]},{"name":"http-status-codes","desc":"枚举 HTTP 状态代码的常量。支持 RFC1945（HTTP/1.0、RFC2616 (HTTP/1.1) 和 RFC2518 (WebDAV)）中定义的所有状态代码。常用于ajax请求处理，ts。","link":"https://github.com/prettymuchbryce/http-status-codes","target":["http-status-codes"]},{"name":"Zodjs","desc":"以 TypeScript 为首的模式声明和验证库，可用于数字格式校验及生成ts声明。","link":"https://zod.dev/README_ZH","target":["zod"]},{"name":"ts2dart","desc":"一款 TypeScript 转 Dart 语言的工具库（会存在一些问题），有挺多年没维护了。","link":"https://github.com/dart-archive/ts2dart","target":["ts2dart"]},{"name":" InversifyJS ","desc":"一款 js/ts IoC的封装库。","link":"https://github.com/inversify/InversifyJS","target":["inversify"]},{"name":" BottleJs ","desc":"一轻量 js/ts 依赖注入容器库。特点是延迟加载。","link":"https://github.com/young-steveo/bottlejs","target":["bottlejs "]}]},{"name":"数据工具","children":[{"name":"stdlib","desc":"js的数学增强库。","link":"https://stdlib.io/","target":["stdlib"]},{"name":"StreamJs","desc":"一款js数据的操作工具。","link":"http://winterbe.github.io/streamjs/","target":["streamjs"]},{"name":"BaconJs","desc":"也是一款js数据的操作工具。","link":"https://baconjs.github.io/","target":["baconjs"]},{"name":"Date fns","desc":"一款模块化支持按需的日期格式化工具。","link":"https://date-fns.org/","target":["date-fns"]},{"name":"DayJs","desc":"一款日期格式化的工具，轻量，MomentJS的替代品。","link":"https://day.js.org/","target":["dayjs"]},{"name":"MomentJs","desc":"一款日期格式化的工具（2020开始停止维护）。","link":"https://momentjs.com/","target":["momentjs"]},{"name":"numbro","desc":"一款多国语言的数字转化工具。","link":"http://numbrojs.com/","target":["numbrojs"]},{"name":" NumeralJs","desc":"用于格式化和操作数字的 js 库。","link":"http://numeraljs.com/","target":["numeraljs"]},{"name":"accounting.js","desc":"数字，金钱的格式化工具。","link":"http://openexchangerates.github.io/accounting.js/","target":["accounting.js"]},{"name":"money.js","desc":"金钱的汇率转换工具。","link":"http://openexchangerates.github.io/money.js/","target":["money.js"]},{"name":"decimal.js","desc":"Js精度处理库。","link":"https://github.com/MikeMcl/decimal.js#readme","target":["decimal.js"]}]},{"name":"请求、cookie和缓存","children":[{"name":"axios","desc":"高频使用的ajax库。","link":"https://github.com/axios/axios","target":["axios"]},{"name":"fetch","desc":"Fetch API的兼容polyfill。","link":"https://github.com/github/fetch","target":["fetch"]},{"name":"jsonp","desc":"不用多说，实现jsonp。（axios没有封装jsonp）","link":"https://github.com/webmodules/jsonp","target":["jsonp"]},{"name":"URI.js","desc":"URI解析操作的库。","link":"http://medialize.github.io/URI.js/","target":["uri"]},{"name":"StoreJs","desc":"storage的封装库，兼容IE6。","link":"https://github.com/marcuswestin/store.js/","target":["storage"]},{"name":"js-cookie","desc":"cookie的封装库。","link":"https://github.com/js-cookie/js-cookie","target":["js-cookie"]},{"name":"Dexie.js","desc":"IndexedDB的封装库。","link":"https://dexie.org/","target":["dexiejs"]},{"name":"localForage.js","desc":"基于IndexedDB、WebSQL、localStorage的离线存储库，Mozilla。","link":"https://localforage.github.io/localForage/","target":["localForage"]},{"name":"basket.js","desc":"利用localStorage来缓存script和css资源。","link":"https://addyosmani.com/basket.js/","target":["basket.js"]}]},{"name":"插件","children":[{"name":"swiper.js","desc":"轮播插件。","link":"https://www.swiper.com.cn/","target":["swiper"]},{"name":"nanobar.js","desc":"绚丽的进度条展示插件，IE7+。","link":"https://github.com/jacoborus/nanobar/","target":["nanobar"]},{"name":"sweetalert","desc":"效果不错的PC alert展示插件。","link":"https://sweetalert.js.org/","target":["sweetalertjs"]},{"name":"bowserjs","desc":"通过ua做的浏览器探测插件。","link":"https://github.com/lancedikson/bowser","target":["bowserjs"]},{"name":"clipboard.js","desc":"剪贴板控制插件。","link":"https://clipboardjs.com/","target":["clipboardjs"]},{"name":"Qrcode-generator","desc":"二维码生成工具。","link":"https://github.com/kazuhikoarase/qrcode-generator/tree/master/js","target":["grcode-generator"]},{"name":"html2canvas","desc":"html转为图片（canvas），即实现网页截图。","link":"http://html2canvas.hertzen.com/documentation","target":["html2canvas"]},{"name":"rrweb","desc":"基于样式截取的网页“录屏”工具，实现用户操作采集和回放。","link":"https://www.rrweb.io/","target":["rrweb "]},{"name":"Pen Editor","desc":"web的文本编辑工具。","link":"https://github.com/sofish/pen#readme","target":["Pen Editor"]},{"name":"cleave.js","desc":"一款好用的input输入控制插件。","link":"https://nosir.github.io/cleave.js/","target":["cleave.js"]},{"name":"autosize.js","desc":"一款好用的``高度自适应工具。","link":"https://github.com/jackmoore/autosize","target":["autosize.js"]},{"name":"FileSaver.js","desc":"网页端字符/图片/文件另存为插件。","link":"https://github.com/eligrey/FileSaver.js","target":["FileSaver.js"]},{"name":"download.js","desc":"网页端字符/图片/文件另存为插件，比FileSaver快一点。","link":"http://danml.com/download.html","target":["download.js"]},{"name":"FileAPI.js","desc":"控制文件上传的插件。","link":"https://github.com/mailru/FileAPI","target":["FileAPI"]},{"name":"shake.js","desc":"移动端摇晃震动监听插件。","link":"https://github.com/alexgibson/shake.js","target":["shake.js"]},{"name":"Tippy.js","desc":"好用的气泡组件，有React版。","link":"https://atomiks.github.io/tippyjs/","target":["tippy.js"]},{"name":"fuse","desc":"轻量、好用的js模糊搜索库。","link":"https://fusejs.io/","target":["fusejs"]},{"name":"algolia","desc":"好用的搜索集成方案。","link":"https://www.algolia.com/","target":["algolia"]},{"name":"dejavu","desc":"一款弹性搜索方案，逮虾户。","link":"https://opensource.appbase.io/dejavu/","target":["dejavu"]},{"name":"driver.js","desc":"一款轻量的用户操作引导插件。","link":"https://kamranahmed.info/driver.js/#single-element-with-popover","target":["driverjs"]},{"name":"aos.js","desc":"一款强大的页面滚动动画插件。","link":"https://michalsnik.github.io/aos/","target":["aosjs"]},{"name":"favico.js","desc":"一款让pc网站图标动起来的插件。","link":"http://lab.ejci.net/favico.js/","target":["favicojs"]},{"name":"fullPage.js","desc":"一款快速搭建全屏滚动页面的插件。","link":"https://alvarotrigo.com/fullPage/","target":["fullpagejs"]},{"name":"Lucky Canvas","desc":"一款支持web、小程序跨平台的 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。","link":"https://github.com/buuing/lucky-canvas","target":["lucky-canvas"]},{"name":"Typedjs","desc":"一款模拟打字机效果的js UI库。","link":"https://mattboldt.com/demos/typed-js/","target":["typed.js"]},{"name":"视/音频","children":[{"name":"MediaElement.js","desc":"一款视频控制插件。","link":"http://www.mediaelementjs.com/","target":["mediaelementjs"]},{"name":"video.js","desc":"一款视频控制插件。","link":"https://videojs.com/","target":["videojs"]},{"name":"flv.js","desc":"一款无需flash的flv播放插件。","link":"https://github.com/bilibili/flv.js","target":["flvjs"]},{"name":"howler.js","desc":"视、音频控制插件。","link":"https://github.com/goldfire/howler.js#documentation","target":["howlerjs"]},{"name":"jplayer","desc":"jQuery的视、音频控制插件。","link":"https://jplayer.org/","target":["jplayer"]},{"name":"audio5.js","desc":"一款音频控制插件。","link":"https://github.com/zohararad/audio5js","target":["audio5js"]}]},{"name":"图片","children":[{"name":"caman.js","desc":"一款web图片处理插件。","link":"http://camanjs.com/","target":["camanjs"]},{"name":"Sharp","desc":"一款强大的图片处理工具。","link":"https://sharp.pixelplumbing.com/","target":["sharp"]},{"name":"squoosh.js","desc":"一款优秀的图片压缩方案，有浏览器环境。","link":"https://github.com/GoogleChromeLabs/squoosh","target":["squoosh"]},{"name":"tesseract.js","desc":"一款强大的OCR识别库。","link":"https://github.com/naptha/tesseract.js","target":["tesseract"]},{"name":"imagesloaded","desc":"判断元素图片加载状态的库。","link":"https://imagesloaded.desandro.com/","target":["imagesloaded"]},{"name":"cropper.js","desc":"一款集成的图片裁剪插件库。","link":"https://github.com/fengyuanchen/cropperjs","target":["cropperjs"]},{"name":"viewer.js","desc":"一款集成的图片浏览/简单处理插件库。","link":"https://fengyuanchen.github.io/viewerjs/","target":["viewerjs"]},{"name":"compressor.js","desc":"一款集成的图片压缩处理插件库。","link":"https://fengyuanchen.github.io/compressorjs/","target":["compressorjs"]}]},{"name":"字符串","children":[{"name":"Voca.js","desc":"字符串的驼峰/修饰/填充/截断/转义/大小写更改等等。","link":"https://vocajs.com/","target":["vocajs"]},{"name":"anchorme.js","desc":"自动将文本中的链接/URL/电子邮件转化为可点击的锚点链接。","link":"https://alexcorvi.github.io/anchorme.js/","target":["anchormejs"]},{"name":"String.js","desc":"字符串的截取删除等操作库（很久没维护了）。","link":"https://github.com/jprichardson/string.js","target":["stringjs"]},{"name":"qs.js","desc":"URL参数处理库。","link":"https://github.com/ljharb/qs","target":["qsjs"]},{"name":"nano-id","desc":"小型（130 字节）、安全、URL友好、唯一的字符串 ID 生成器。","link":"https://zelark.github.io/nano-id-cc/","target":["nanoid"]},{"name":"uuid","desc":"生成符合 RFC 的 UUID 库。","link":"https://github.com/uuidjs/uuid","target":["uuid"]},{"name":"md5.js","desc":"获取字符、Buffer的md5。","link":"https://github.com/pvorb/node-md5","target":["md5"]},{"name":"hash.js","desc":"js的hash字符串处理。","link":"https://github.com/indutny/hash.js","target":["hash"]}]}]},{"name":"工具","children":[{"name":"RequireJs","desc":"js模块化工具（webpack后很少有项目会用到）。","link":"https://requirejs.org/","target":["requirejs"]},{"name":"SeaJs","desc":"js模块化工具（webpack后很少有项目会用到）。","link":"http://yslove.net/seajs/","target":["seajs"]},{"name":"Browserify","desc":"浏览器端使用类似于 node 的 require() 方式。","link":"https://browserify.org/","target":["browserify"]},{"name":"validate.js","desc":"form表单校验工具。","link":"https://github.com/rickharrison/validate.js","target":["validate.js"]},{"name":"validator.js","desc":"有名的内容校验工具，比如邮箱验证、数值验证等。","link":"https://github.com/validatorjs/validator.js","target":["validator.js"]},{"name":"RxJS中文官网","desc":"ReactiveX编程理念的js异步编程库。","link":"https://cn.rx.js.org/","target":["RxJS"]},{"name":"Faker","desc":"用于在浏览器/Nodejs中生成假数据（注意作者已删源码）。","link":"https://github.com/Marak/Faker.js#readme","target":["faker"]},{"name":"Joi官网","desc":"面向js的强大schema描述语言与数据验证器。","link":"https://joi.dev/","target":["joi"]},{"name":"classnames","desc":"className条件组合的工具，多用于React。","link":"https://github.com/JedWatson/classnames#readme","target":["classnames"]},{"name":" clsx ","desc":"轻量(228B)className条件组合的工具，多用于React。","link":"https://github.com/lukeed/clsx","target":["clsx "]},{"name":"path-to-regexp","desc":"URL或路径校验工具，使用面极广。","link":"https://github.com/pillarjs/path-to-regexp#readme","target":["path-to-regexp"]},{"name":"Mousetrap","desc":"键盘事件注册捕获封装库，支持Windows/Mac键盘。","link":"https://craig.is/killing/mice","target":["Mousetrap"]}]},{"name":"数据可视化(图表)","children":[{"name":"highcharts","desc":"效果、兼容最好（ie6+）的可视化库，可惜企业要收费。","link":"https://api.hcharts.cn/highcharts","target":["highcharts"]},{"name":"echarts","desc":"国内最全面的可视化库。","link":"http://echarts.baidu.com/api.html#echarts","target":["echarts"]},{"name":"d3","desc":"不直接输出图形，输出开发功能的svg工具。","link":"https://github.com/d3/d3/wiki","target":["d3"]},{"name":"Chartjs","desc":"模块化可视化库。","link":"http://www.chartjs.org/docs/latest/","target":["chartjs"]},{"name":"antv","desc":"包括pc/移动的可视化库，蚂蚁。","link":"http://antv.alipay.com/zh-cn/g2/3.x/demo/funnel/basic.html","target":["G2","F2"]},{"name":"FundCharts","desc":"本人的跨端轻量可视化库。","link":"http://blog.michealwayne.cn/FundCharts/docs/","target":["fundcharts"]},{"name":"ThreeJs文档","desc":"著名的webGL 3D建模库","link":"https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene","target":["threejs","webGL"]},{"name":"PlayCanvas文档","desc":"webGL游戏3D建模库","link":"https://playcanvas.com/","target":["playcanvas"]},{"name":"scene.js","desc":"WebGL 3D基础库。","link":"http://scenejs.org/","target":["scenejs"]},{"name":"Snap.svg","desc":"一款svg操作库。","link":"http://snapsvg.io/","target":["snap"]},{"name":"pixi.js","desc":"2D WebGL渲染引擎。","link":"https://www.pixijs.com/","target":["pixijs"]},{"name":"svg-3d-builder","desc":"3D SVG渲染引擎。","link":"https://libcafe.com/3d/index.html","target":["svg-3d-builder"]},{"name":"jsplumb","desc":"一款好用的流程图可视化库。","link":"https://github.com/jsplumb/jsplumb","target":["jsplumb"]},{"name":"cytoscapejs","desc":"一款好用的关系图谱可视化库。","link":"https://js.cytoscape.org/","target":["cytoscape"]},{"name":"Mermaid","desc":"一款好用的流程图生成可视化库。","link":"http://mermaid-js.github.io/mermaid/#/","target":["mermaid"]},{"name":"Zrender","desc":"2D渲染渲染引擎库，支持Canvas/SVG/VML，也是ECharts的渲染器。","link":"https://ecomfe.github.io/zrender-doc/public/","target":["zrender"]}]},{"name":"数据可视化(地图)","children":[{"name":"cesiumjs","desc":"一款开源的3D城市建模库。","link":"https://cesiumjs.org/","target":["Cesium.js"]},{"name":"Kartograph","desc":"一款普通的2D SVG城市数据展示库，IE7+。","link":"http://kartograph.org/","target":["Kartograph.js"]},{"name":"leafletjs","desc":"一款移动优先的地图展示插件。","link":"https://leafletjs.com/","target":["Leaflet.js"]}]},{"name":"h5动画","children":[{"name":"Bounce.js","desc":"牛啤的CSS3动画创建工具。","link":"http://bouncejs.com/","target":["BounceJS"]},{"name":"animateplus.js","desc":"仅3k的动画工具。","link":"https://github.com/bendc/animateplus","target":["Animateplus"]},{"name":"Anime.js","desc":"轻量级js动画库。","link":"https://animejs.com/","target":["animejs"]},{"name":"svg.js","desc":"轻量的svg操作/动画库。","link":"https://svgjs.com/docs/3.0/","target":["svgjs"]},{"name":"snapsvg","desc":"一款有名的svg操作/动画库。","link":"http://snapsvg.io/","target":["Snap.svg"]},{"name":"lottie","desc":"web/原生/小程序/RN的跨端动效方案。","link":"http://airbnb.io/lottie/#/","target":["lottie"]},{"name":"EaselJS","desc":"canvas动画操作库，CreateJS四剑客之一。","link":"https://createjs.com/easeljs","target":["easeljs"]},{"name":"TweenJS","desc":"动画曲线（ease/linear...）操作库，CreateJS四剑客之一。","link":"https://createjs.com/tweenjs","target":["tweenjs"]},{"name":"SoundJS","desc":"音频控制库，CreateJS四剑客之一。","link":"https://createjs.com/soundjs","target":["soundjs"]},{"name":"PreloadJS","desc":"资源预加载库，CreateJS四剑客之一。","link":"https://createjs.com/preloadjs","target":["preload"]},{"name":"P5js","desc":"canvas绘画功能库。","link":"https://p5js.org/","target":["p5js"]},{"name":"Rough.js","desc":"一个有意思的canvas绘图库（画出的图形具有手绘风格）。","link":"https://roughjs.com/","target":["roughjs"]},{"name":"BabylonJS","desc":"一个功能强大，美观，简单且开放的游戏和渲染引擎。","link":"https://github.com/BabylonJS/Babylon.js","target":["BabylonJS"]},{"name":"GranimJs","desc":"用于创建流体和交互式渐变的动画js库，仅17k。","link":"https://github.com/sarcadass/granim.js#readme","target":["granimjs"]},{"name":"canvas-confetti","desc":"轻量的js canvas礼花特效库。","link":"https://catdad.github.io/canvas-confetti/","target":["confetti"]}]},{"name":"移动端手势","children":[{"name":"AlloyFinger.js","desc":"增加移动端的各种手势事件。","link":"https://github.com/AlloyTeam/AlloyFinger","target":["AlloyFinger"]},{"name":"hammer.js","desc":"手势封装库，取消了移动端click的300ms延迟。","link":"http://hammerjs.github.io/","target":["hammerjs"]},{"name":"interact.js","desc":"使用JavaScript实现拖放、缩放和多点触控手势。","link":"https://interactjs.io/","target":["interactjs"]}]},{"name":"加载","children":[{"name":"aload.js","desc":"异步图片/js/css加载工具。","link":"https://pazguille.github.io/aload/","target":["aload.js"]},{"name":"layzr.js","desc":"轻量图片懒加载工具。","link":"http://callmecavs.com/layzr.js/","target":["layzr.js"]},{"name":"lazysizes.js","desc":"高性能的图片/iframe懒加载工具。","link":"https://github.com/aFarkas/lazysizes","target":["lazysizes"]},{"name":"infinite-scroll.js","desc":"“无限”滚动的加载插件。","link":"https://infinite-scroll.com/","target":["infinite-scroll"]}]},{"name":"TypeScript辅助","children":[{"name":"ts-loader","desc":"webpack中的TypeScript构建插件。","link":"https://github.com/TypeStrong/ts-loader","target":["ts-loader"]},{"name":"awesome-typescript-loader","desc":"webpack中的TypeScript构建插件，比ts-loader要快一点。","link":"https://github.com/s-panferov/awesome-typescript-loader","target":["awesome-typescript-loader"]},{"name":"ts-transformer-keys","desc":"用于提取interface的键值数组（需要用webpack）。","link":"https://github.com/kimamula/ts-transformer-keys#readme","target":["ts-transformer-keys"]},{"name":"ts-dedent","desc":"node端打印正常换行的log。","link":"https://github.com/tamino-martinius/node-ts-dedent#readme","target":["ts-dedent"]},{"name":"suppress-ts-error","desc":"自动为项目中所有的类型报错添加 @ts-expect-error 或 @ts-ignore 注释。","link":"https://github.com/kawamataryo/suppress-ts-errors","target":["suppress-ts-error"]},{"name":"type-fest","desc":"经典的工具类型封装库。","link":"https://github.com/sindresorhus/type-fest","target":["type-fest"]},{"name":" TypeChat ","desc":"基于OpenAi GPT模型的ts类型生产工具，微软。","link":"https://microsoft.github.io/TypeChat/","target":["typechat"]}]},{"name":"其他","children":[{"name":"js-framework-benchmark","desc":"基于chrome的各前端框架性能对比，有个分析站点。","link":"https://github.com/krausest/js-framework-benchmark","target":["js-framework-benchmark"]},{"name":"Angular","desc":"封装度高的经典前端框架。","link":"https://angular.io/","target":["angular"]},{"name":"Svelte","desc":"无虚拟DOM的轻量Web应用编译器，template，近期火。","link":"https://github.com/sveltejs/svelte","target":["svelte"]},{"name":"SolidJs","desc":"对webComponent友好的库，开发体验与react相似，国外这几年较火。","link":"https://solidjs.com/","target":["solid"]},{"name":"Stenciljs","desc":"webComponent的编译构建框架，jsx。","link":"https://stenciljs.com/","target":["stenciljs"]},{"name":"Infernojs","desc":"轻量的类React库，jsx。","link":"https://www.infernojs.org/","target":["infernojs"]},{"name":"Emberjs","desc":"脚手架强大的web开发框架，template。","link":"https://emberjs.com/","target":["emberjs"]},{"name":"Vuera","desc":"用来混用Vue/React组件的库、即Vue中可以使用React组件、React中可以使用Vue组件。","link":"https://github.com/akxcv/vuera","target":["vuera"]},{"name":"Veaury","desc":"用来混用Vue3/React组件的库、比vuera功能完善。","link":"https://github.com/devilwjp/veaury","target":["veaury"]},{"name":"Quark","desc":"基于 Web Components 的移动端跨框架 UI 组件库，哈啰。","link":"https://quark-design.hellobike.com/","target":["quark"]},{"name":"Web3js","desc":"以太坊标准js封装库。","link":"https://github.com/web3/web3.js","target":["web3js"]}]}]},{"name":"Vue","children":[{"name":"Vue3 文档","desc":"Vue3 官方文档。","link":"https://cn.vuejs.org/","target":["vue"]},{"name":"Vue2 文档","desc":"Vue2 官方文档。","link":"https://cn.vuejs.org/v2/guide/syntax.html","target":["vue"]},{"name":"vue-cli 文档","desc":"vue脚手架工具文档。","link":"https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4","target":["vue-cli"]},{"name":"pinia 文档","desc":"轻量Vue状态管理工具，vue3推荐。","link":"https://pinia.vuejs.org/","target":["pinia"]},{"name":"vuex 文档","desc":"vue数据流控制工具。","link":"https://vuex.vuejs.org/zh/","target":["vuex"]},{"name":"vue-router 文档","desc":"基于vue的前端路由控制。","link":"https://router.vuejs.org/zh/","target":["vue-router"]},{"name":"vue-content-loader 文档","desc":"vue版SVG骨架屏插件。","link":"http://danilowoz.com/create-vue-content-loader/","target":["create-vue-content-loader"]},{"name":"better-scroll 文档","desc":"控制滚动场景的插件。","link":"http://ustbhuangyi.github.io/better-scroll/doc/api.html","target":["better-scroll"]},{"name":"vant 文档","desc":"移动UI库，有赞。","link":"https://youzan.github.io/vant/#/zh-CN/intro","target":["vant"]},{"name":"vue-weui 文档","desc":"weui风格的移动UI组件库。","link":"http://aidenzou.github.io/vue-weui/#!/","target":["vue-weui"]},{"name":"Element 文档","desc":"使用PC中后台前端开发的UI组件库，饿了么。","link":"https://element.eleme.cn/#/zh-CN","target":["element"]},{"name":"vue-lazyload 文档","desc":"vue版的图片/组件懒加载插件。","link":"https://github.com/hilongjw/vue-lazyload","target":["vue-lazyload"]},{"name":"iView 文档","desc":"PC UI组件库。","link":"http://v1.iviewui.com/docs/guide/install","target":["iview"]},{"name":"antd-vue 文档","desc":"PC UI组件库，ant design的Vue版。","link":"https://vue.ant.design/docs/vue/introduce-cn/","target":["antd-vue"]},{"name":"vue-i18n 文档","desc":"多语言解决方案。","link":"https://kazupon.github.io/vue-i18n/","target":["vue-i18n"]},{"name":"v-region 文档","desc":"Vue行政区选择组件。","link":"https://terryz.github.io/vue/#/region","target":["v-region"]},{"name":"vue-echarts 文档","desc":"Echarts的Vue封装组件。","link":"https://github.com/ecomfe/vue-echarts","target":["vue-echarts"]},{"name":"Nuxt.JS 文档","desc":"Vue的服务端渲染应用框架。","link":"https://zh.nuxtjs.org/","target":["nuxtjs"]},{"name":"ViteJS 文档","desc":"无bundle的Vue轻量前端项目构建工具。","link":"https://github.com/vitejs/vite","target":["vitejs"]},{"name":"vue-class-component 仓库","desc":"Vue的Component装饰器封装，用于jsx/tsx的vue组件写法。","link":"https://github.com/vuejs/vue-class-component#readme","target":["vue-class-component"]},{"name":"Formily 文档","desc":"Element/Antd的表单DSL解决方案。","link":"https://formilyjs.org/","target":["formilyjs"]},{"name":"vue-2-3","desc":"vue2和vue3共存的一种解决方案封装。","link":"https://github.com/privatenumber/vue-2-3","target":["vue-2-3"]},{"name":"SWRV","desc":"用于数据请求的 Vue 钩子库，处理了请求缓存、状态等等。","link":"https://docs-swrv.netlify.app/","target":["swrv"]},{"name":"Vue Request","desc":"用于数据请求的 Vue 钩子库，比swrv能力要稍微丰富一些。","link":"https://www.attojs.org/","target":["vue-request"]},{"name":"Vue Use","desc":"基于Vue组合式API的实用工具集，除了常用的请求动画等封装外、还封装了浏览器、electron utils。","link":"https://www.vueusejs.com/","target":["vue-use"]},{"name":"Vue React Combined","desc":"Vue2和React快捷集合的工具包。","link":"https://github.com/devilwjp/vuereact-combined#readme","target":["vuereact-combined"]},{"name":" Veaury ","desc":"Vue3 和 React 快捷集合的工具包。","link":"https://github.com/devilwjp/veaury","target":["veaury"]}]},{"name":"React","children":[{"name":"React 文档","desc":"React 官方文档。","link":"https://reactjs.org/","target":["react"]},{"name":"React 中文文档","desc":"React 中文翻译文档。","link":"https://react.docschina.org/","target":["react"]},{"name":"create-react-app 文档","desc":"react脚手架工具文档。","link":"https://facebook.github.io/create-react-app/","target":["create-react-app"]},{"name":"react Chrome devtools","desc":"react的Chrome开发拓展插件。","link":"https://github.com/facebook/react-devtools","target":["react-devtools"]},{"name":"react-router","desc":"用于react的前端路由控制。","link":"http://react-guide.github.io/react-router-cn/","target":["react-router"]},{"name":"Recoil 文档","desc":"简单、对hook友好的数据流控制工具。","link":"https://github.com/facebookexperimental/Recoil","target":["recoil"]},{"name":"redux 文档","desc":"广泛使用的数据流控制工具，reducer+flux。","link":"https://www.redux.org.cn/docs/introduction/","target":["redux"]},{"name":"flux 文档","desc":"数据流控制工具（现在已经很少在用了）。","link":"http://facebook.github.io/flux/","target":["flux"]},{"name":"mobx 文档","desc":"轻量数据流控制工具。","link":"https://cn.mobx.js.org/","target":["mobx"]},{"name":"dvajs 文档","desc":"基于 redux 和 redux-saga 的数据流方案，蚂蚁。","link":"https://dvajs.com/","target":["dvajs"]},{"name":"UmiJs 文档","desc":"可插拔的企业级 react 应用框架，蚂蚁。","link":"https://umijs.org/zh/","target":["umijs"]},{"name":"Rekit 文档","desc":"React/Redux/React-router开发工具/IDE。","link":"http://rekit.js.org","target":["rekit"]},{"name":"NextJs 文档","desc":"轻量级的 React 服务端渲染应用框架。","link":"https://nextjs.org/","target":["nextjs"]},{"name":"Gatsby.js 文档","desc":"轻量级的 React 静态网站搭建框架。","link":"https://www.gatsbyjs.cn/","target":["gatsbyjs"]},{"name":"React-use 文档","desc":"好用的React自定义hooks封装库。","link":"https://github.com/streamich/react-use","target":["react-use"]},{"name":"Umi Hooks 文档","desc":"适用于中台的hooks方法，如请求、拖拽、防抖。","link":"https://cn.mobx.js.org/","target":["umi hooks"]},{"name":"react-query 文档","desc":"好用的React ajax接口请求处理封装hook。","link":"https://react-query.tanstack.com/docs/overview","target":["react-query"]},{"name":"why-did-you-render","desc":"用来检测React组件是否需要重新渲染的工具。","link":"https://github.com/welldone-software/why-did-you-render#readme","target":["why-did-you-render"]},{"name":"framer-motion 官网","desc":"非常强大的React动画/交互手势库，来自Farmer API。","link":"https://www.framer.com/motion/","target":["framer-motion"]},{"name":"react-content-loader 文档","desc":"react版SVG骨架屏插件。","link":"http://danilowoz.com/create-content-loader/","target":["create-content-loader"]},{"name":"antd 文档","desc":"ant design，PC UI组件库。","link":"https://ant.design/docs/react/getting-started-cn","target":["antd"]},{"name":"antd-mobile 文档","desc":"移动版的antd，UI组件库。","link":"https://mobile.ant.design/index-cn","target":["antd-mobile"]},{"name":"styled-components 文档","desc":"react的css-in-js实现。","link":"https://www.styled-components.com/","target":["styled-components"]},{"name":" goober 文档","desc":"只有1kb大小的css-in-js库。","link":"https://github.com/cristianbote/goober","target":["goober"]},{"name":"chatUI","desc":"服务于对话领域的解决方案（前端组件），阿里。","link":"https://chatui.io/","target":["chatui.io "]},{"name":"react-lazyload 文档","desc":"react版的图片/组件加载插件。","link":"https://github.com/twobin/react-lazyload","target":["react-lazyload"]},{"name":"react-loadable","desc":"实现react组件构建时代代码抽离和动态加载。","link":"https://github.com/jamiebuilds/react-loadable#readme","target":["react-loadable"]},{"name":"react-draggable","desc":"一个用于拖拽操作的React封装组件。","link":"https://github.com/STRML/react-draggable","target":["react-draggable"]},{"name":"React DND","desc":"适用于React的复杂拖拽控制库，基于HTML5拖放API。","link":"https://github.com/react-dnd/react-dnd#readme","target":["react-dnd"]},{"name":"react-tappable","desc":"一个用于点击事件操作的React封装组件。","link":"https://github.com/JedWatson/react-tappable","target":["react-tappable"]},{"name":"React-portal","desc":"一个通过portals定义附加的节点组件渲染工具。","link":"https://github.com/tajo/react-portal#readme","target":["react-portal"]},{"name":"React-contextmenu","desc":"pc端web实现右键菜单的工具组件。","link":"https://github.com/vkbansal/react-contextmenu","target":["react-contextmenu"]},{"name":"react-markdown","desc":"在react上使用的markdown工具。","link":"https://rexxars.github.io/react-markdown/","target":["react-markdown"]},{"name":"30s-of-react","desc":"常用React代码模块集合，30s of code系列。","link":"https://github.com/30-seconds/30-seconds-of-react","target":["30s-of-react"]},{"name":"React Bits","desc":"常用React技巧。","link":"https://vasanthk.gitbooks.io/react-bits/","target":["react-bits"]},{"name":"docsiteJS","desc":"基于React的文档生成工具。","link":"https://docsite.js.org/zh-cn/docs/addDoc.html","target":["docsite"]},{"name":"React Color","desc":"基于React的拾色器插件，模拟Sketch, Photoshop, Chrome等取色工具，注意可以直接用于Preact。","link":"http://casesandberg.github.io/react-color/","target":["react-color"]},{"name":"React Desktop","desc":"模拟Mac或windows桌面交互的React封装组件。","link":"http://reactdesktop.js.org/","target":["react-desktop"]},{"name":"React Boilerplate","desc":"性能优先的一个典型的React项目模板。","link":"https://www.reactboilerplate.com/","target":["react-boilerplate"]},{"name":"React RTE","desc":"富文本编辑器，基于draftJS。","link":"https://github.com/sstur/react-rte","target":["react-rte"]},{"name":"React i18Next","desc":"多语言解决方案。","link":"https://react.i18next.com/","target":["react-i18next"]},{"name":"SWR","desc":"用于数据请求的 React Hooks 库，处理了请求缓存、状态等等。","link":"https://swr.vercel.app/","target":["swr"]},{"name":"Formik","desc":"高度封装、开箱即用的 React form 表单封装库。","link":"https://formik.org/","target":["formik"]}]},{"name":"Nodejs和构建","children":[{"name":"Node.js best practices list","desc":"Nodejs最佳实践集合。","link":"https://github.com/goldbergyoni/nodebestpractices","target":["nodebestpractices"]},{"name":"npm","desc":"node包统一平台。","link":"https://www.npmjs.com/","target":["npm"]},{"name":"yarn","desc":"高速的node包管理器。","link":"https://yarn.bootcss.com/","target":["yarn"]},{"name":"pnpm","desc":"快速高效（安全）的node包统一管理器。","link":"https://pnpm.js.org/","target":["pnpm"]},{"name":"n","desc":"极度简单的 Nodejs 版本管理工具。","link":"https://github.com/tj/n","target":["n"]},{"name":"StoryBook","desc":"用于独立开发React、Vue和Angular的UI组件库导航站点。","link":"https://storybook.js.org/","target":["storybookjs"]},{"name":"unpkg","desc":"国外公共静态资源CDN，适用于 npm 上的所有内容。","link":"https://unpkg.com/","target":["unpkg"]},{"name":"nodejs api","desc":"Node官方文档。","link":"http://nodejs.cn/api/","target":["node"]},{"name":"Deno api","desc":"Deno官方文档（Nodejs.next）。","link":"https://doc.deno.land/https/github.com/denoland/deno/releases/latest/download/lib.deno.d.ts","target":["deno"]},{"name":"Bun","desc":"号称比Nodejs快3倍的js runtime容器。","link":"https://bun.sh/","target":["bun"]},{"name":"TurboRepo","desc":"好用的、高性能的多包管理工具，monorepo。","link":"https://turbo.build/repo","target":["turborepo"]},{"name":"Lerna","desc":"好用的多包管理工具，monorepo。","link":"https://lerna.js.org/","target":["lerna"]},{"name":"patch-package","desc":"给node_modules打补丁的工具包。","link":"https://github.com/ds300/patch-package#readme","target":["patch-package "]},{"name":"V8 dev docs","desc":"js V8引擎文档。","link":"https://v8.dev/docs","target":["V8"]},{"name":"V8","desc":" V8引擎介绍。","link":"https://v8docs.nodesource.com/node-10.6/index.html","target":["v8"]},{"name":"QuickJs","desc":" 一款轻量级js引擎。","link":"https://github.com/bellard/quickjs","target":["quickjs"]},{"name":"jsvu","desc":" js引擎调试必备，引擎切换及版本控制。","link":"https://github.com/GoogleChromeLabs/jsvu","target":["jsvu"]},{"name":"docker","desc":"应用容器引擎Docker。","link":"https://docs.docker.com/","target":["docker"]},{"name":"Linux","desc":"Linux命令查询手册。","link":"https://man.linuxde.net/","target":["linux"]},{"name":"GraphicsMagick","desc":"后台图片处理工具。","link":"http://aheckmann.github.io/gm/","target":["gm"]},{"name":"js-xlsx","desc":"xlsx的编辑和处理库。","link":"https://github.com/protobi/js-xlsx/tree/beta#readme","target":["js-xlsx"]},{"name":"ShellJs","desc":"用nodejs实现shell常用命令。","link":"https://github.com/shelljs/shelljs","target":["shelljs"]},{"name":"chalk","desc":"控制台命令行输出样式工具，主要控制颜色。","link":"https://github.com/chalk/chalk","target":["chalk "]},{"name":"node-schedule","desc":"适用于nodejs的定时任务工具。","link":"https://github.com/node-schedule/node-schedule","target":["node-schedule"]},{"name":"source-map-support","desc":"在 nodejs 环境下支持 SourceMap 的模块工具。","link":"https://www.npmjs.com/package/source-map-support","target":["source-map-support"]},{"name":"yalc","desc":"npm link 的有效替代品，使用真实的 npm package 代替各种 link。","link":"https://github.com/wclr/yalc","target":["yalc"]},{"name":"构建","children":[{"name":"Prettier","desc":"对代码无侵害的代码格式化工具。","link":"https://prettier.io/","target":["prettier "]},{"name":"ejs","desc":"简单上手的html模板引擎。","link":"https://ejs.bootcss.com/","target":["ejs"]},{"name":"Mustache","desc":"适用于多语言的html模板库。","link":"http://mustache.github.io/","target":["mustache"]},{"name":"pug","desc":"html模板库。","link":"https://pugjs.org/language/includes.html","target":["pug"]},{"name":"jade","desc":"html模板库。","link":"http://www.nodeclass.com/api/jade.html","target":["jade"]},{"name":"gulp 配置文档","desc":"自动化构建工具。","link":"https://www.gulpjs.com.cn/docs/","target":["gulp"]},{"name":"gulp plugins","desc":"gulp插件中心。","link":"https://gulpjs.com/plugins/","target":["gulp"]},{"name":"grunt 配置文档","desc":"自动化构建工具。","link":"https://grunt.docschina.org/","target":["grunt"]},{"name":"rollupjs文档","desc":"一款ES6模块构建工具。","link":"https://rollupjs.org/guide/en/","target":["Rollup"]},{"name":"webpack 配置文档","desc":"应用面不能再广的打包工具。","link":"https://webpack.docschina.org/","target":["webpack"]},{"name":"webpack-chain","desc":"链式配置webpack配置的工具。","link":"https://github.com/neutrinojs/webpack-chain","target":["webpack-chain"]},{"name":"TurboPack","desc":"基于Rust的高性能打包工具。","link":"https://turbo.build/pack","target":["turbopack"]},{"name":"parceljs 配置文档","desc":"轻量打包。","link":"https://parceljs.docschina.org/","target":["parceljs"]},{"name":"snowpack 官网","desc":"无bundle的轻量前端项目构建工具。","link":"https://www.snowpack.dev/","target":["snowpack"]},{"name":"swc","desc":"用Rust写的、号称比babel快20倍且支持其所有功能的ts/js编译器。","link":"https://swc.rs/","target":["swc"]},{"name":"babel","desc":"应用面不能再广的ES编译器。","link":"http://babeljs.io/","target":["babel"]},{"name":"htmlparser2","desc":"一款html的转AST工具。","link":"https://github.com/fb55/htmlparser2#readme","target":["htmlparser2"]},{"name":"parse5","desc":"一款html的转AST工具。","link":"https://github.com/inikulin/parse5/blob/master/packages/parse5/docs/index.md","target":["parse5"]},{"name":"recast","desc":"一款js转AST的工具。","link":"https://github.com/benjamn/recast","target":["recast"]},{"name":"ts-migrate","desc":"一款js转ts(TypeScript)的工具。","link":"https://github.com/airbnb/ts-migrate","target":["ts-migrate"]},{"name":"Concurrently","desc":"一款Nodejs的命名行控制工具，实现同时运行多条命令。","link":"https://github.com/kimmobrunfeldt/concurrently#readme","target":["concurrently"]},{"name":"esbuild","desc":"一款极快的js打包和压缩工具。","link":"https://github.com/evanw/esbuild","target":["esbuild"]},{"name":"critical","desc":"一款从HTML中提取相关CSS的工具。","link":"https://github.com/addyosmani/critical#readme","target":["critical"]},{"name":"ModernJS","desc":"web前端工程化体系工具，字节跳动。","link":"https://modernjs.dev/","target":["modernjs"]},{"name":"javascript-obfuscator","desc":"js代码混淆插件。","link":"https://github.com/javascript-obfuscator/javascript-obfuscator","target":["obfuscator"]}]},{"name":"服务端","children":[{"name":"express 配置文档","desc":"轻量web应用程序开发框架。","link":"http://www.expressjs.com.cn/","target":["express"]},{"name":"Koa 文档","desc":"web应用程序开发框架。","link":"https://koajs.cn/#-application-","target":["koajs"]},{"name":"Fastify 官网","desc":"标称当代最快的轻量web应用程序开发框架，重点是JSON schema加速。","link":"https://www.fastify.io/","target":["fastify"]},{"name":"Midway 官网","desc":"支持了 Web / 全栈 / 微服务 / RPC / Socket / Serverless 的 web 应用程序开发框架，阿里淘系。","link":"http://www.midwayjs.org/","target":["midway"]},{"name":"feathers.js","desc":"轻量web应用程序开发框架，适用于数据流型。","link":"https://docs.feathersjs.com/","target":["feathersjs"]},{"name":"Nest.js","desc":"强大的Web应用框架。","link":"https://docs.nestjs.com/","target":["nestjs"]},{"name":"Mockjs 配置文档","desc":"接口数据模拟工具，可以在客户端和服务端使用。","link":"https://github.com/nuysoft/Mock/wiki","target":["mockjs"]},{"name":"SheetJs","desc":"通过node操作word的工具。","link":"https://sheetjs.com/","target":["sheetjs"]},{"name":"ParallelJs","desc":"并行处理js的工具，可用于浏览器和node服务端。","link":"https://github.com/parallel-js/parallel.js","target":["paralleljs"]},{"name":"js-pdf","desc":"通过node操作生成pdf的工具。","link":"https://parall.ax/products/jspdf","target":["js-pdf"]},{"name":"pm2","desc":"node进程管理。","link":"http://doc.pm2.io/en/plus/overview/","target":["pm2"]},{"name":"colors.js","desc":"node log控制台输出颜色控制。","link":"https://github.com/Marak/colors.js","target":["colorsjs"]},{"name":"log4.js","desc":"log日志工具。","link":"https://log4js-node.github.io/log4js-node/","target":["log4js"]},{"name":"nw.js","desc":"基于nodeJs和chromium的应用程序运行环境，允许您直接从DOM调用所有Node.js模块。","link":"https://nwjs.io/","target":["nwjs"]},{"name":"node-archiver","desc":"支持ZIP/TAR文档流传输和接收插件。","link":"https://github.com/archiverjs/node-archiver","target":["node-archiver"]},{"name":"yazl","desc":"压缩zip插件，对应解压为[yauzl](https://github.com/thejoshwolfe/yauzl)。","link":"https://github.com/thejoshwolfe/yazl","target":["yazl"]},{"name":"SailsJs","desc":"好用的MVC nodejs框架。","link":"https://sailsjs.com/","target":["sailsjs"]},{"name":"Helmet中间件","desc":"通过设置响应头header保护express服务应用。","link":"https://helmetjs.github.io/","target":["helmet"]},{"name":"Cors中间件","desc":"Nodejs的Cors中间件。","link":"https://github.com/expressjs/cors#readme","target":["cors"]},{"name":"Body-parser中间件","desc":"Nodejs的请求流解析中间件。","link":"https://github.com/expressjs/body-parser#readme","target":["body-parser"]},{"name":"Restify","desc":"Nodejs的Web服务框架。","link":"http://restify.com/","target":["restify"]},{"name":"Multer","desc":"用于处理上传文件的Nodejs中间件。","link":"https://github.com/expressjs/multer#readme","target":["multer"]},{"name":"Node-cache","desc":"一个Nodejs的缓存控制模块。","link":"https://github.com/node-cache/node-cache","target":["node-cache"]},{"name":"Socket.IO","desc":"WebSocket解决方案。","link":"https://socket.io/","target":["socket.io"]},{"name":"ioredis","desc":"redis调用js封装库。","link":"https://github.com/luin/ioredis","target":["ioredis"]},{"name":"ws","desc":"WebSocket的一个nodejs包。","link":"https://github.com/websockets/ws","target":["ws"]},{"name":"nginxconfig.io","desc":"在线生成nginx配置的工具。","link":"https://github.com/digitalocean/nginxconfig.io","target":["nginxconfig.io"]},{"name":"fast-safe-stringify","desc":"安全快速地序列化JSON，替代JSON.stringify。","link":"https://github.com/davidmarkclements/fast-safe-stringify#readme","target":["fast-safe-stringify"]}]},{"name":"GraphQL","children":[{"name":"Graphql-js","desc":"GraphQL的js实现。","link":"https://graphql.org/graphql-js/","target":["graphql"]},{"name":"hasura graphql-engine","desc":"一款强大的GraphQL引擎方案。","link":"https://github.com/hasura/graphql-engine","target":["hasura"]},{"name":"apollo-client","desc":"适用于每个UI框架和GraphQL服务器的方案。","link":"https://github.com/apollographql/apollo-client","target":["apollo-client"]}]},{"name":"微前端","children":[{"name":"single-spa","desc":"以路由配置为主要特点的微前端解决方案。","link":"https://single-spa.js.org/","target":["single-spa"]},{"name":"qiankun","desc":"蚂蚁系微前端框架，基于single-spa。","link":"https://qiankun.umijs.org/zh/","target":["qiankun"]},{"name":"Module Federation","desc":"构建时共享模块为主要特点的微前端解决方案，webpack（5）的实现。","link":"https://webpack.docschina.org/concepts/module-federation/","target":["module-federation"]},{"name":"R/Fronts","desc":"渐进式微前端框架，基于webpack module-federation。","link":"https://fronts.js.org/","target":["fronts"]},{"name":"无界Wujie","desc":"基于web component+iframe的微前端框架，腾讯。","link":"https://wujie-micro.github.io/doc/","target":["wujie"]},{"name":"jsdom","desc":"在node环境上实现DOM操作的封装库。","link":"https://github.com/jsdom/jsdom","target":["jsdom"]}]},{"name":"云和Serverless","children":[{"name":"WasmEdge 官网","desc":"一款与WebAssembly有关的云原生及serverless框架。","link":"https://wasmedge.org/","target":["wasmedge"]},{"name":"Serverless Framework 官网","desc":"快速建立node Serverless 服务的框架，支持腾讯云 SCF，AWS Lambda等。","link":"https://www.serverless.com/","target":["serverless"]},{"name":"AWS Lambda","desc":"经典，亚马逊amazon serverless计算服务。","link":"https://aws.amazon.com/cn/campaigns/lambda/","target":["aws-lambda"]},{"name":"字节轻服务 官网","desc":"字节轻服务，支持Serverless（FaaS）、CDN等服务，有免费档。","link":"https://qingfuwu.cn/","target":["qingfuwu"]},{"name":"阿里云 FC","desc":"阿里云函数计算服务，支持Serverless（FaaS）。","link":"https://help.aliyun.com/document_detail/154438.html","target":["qingfuwu"]},{"name":"腾讯云 SFC","desc":"腾讯云云函数服务，支持Serverless（FaaS）。","link":"https://cloud.tencent.com/document/product/583","target":["qingfuwu"]}]},{"name":"低代码LowCode","children":[{"name":"lowcode-engine","desc":"阿里开源低代码引擎。","link":"https://lowcode-engine.cn/","target":["lowcode-engine"]},{"name":"微搭","desc":"腾讯低代码引擎，微搭。","link":"https://weda.cloud.tencent.com/","target":["weda"]},{"name":"amis","desc":"百度开源低代码引擎，适用于偏中后台项目。","link":"https://aisuda.bce.baidu.com/amis/zh-CN/docs/index","target":["amis"]},{"name":"TinyEngine","desc":"华为2023开源低代码引擎，具备图元编排能力。","link":"https://opentiny.design/tiny-engine#/home","target":["tiny-engine"]},{"name":"Tango","desc":"网易云音乐2023开源低代码引擎，不受私有 DSL 和协议限制。","link":"https://netease.github.io/tango/","target":["tango"]}]}]},{"name":"Hybird和跨端","children":[{"name":"pwa","desc":"渐进式web应用。","link":"https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps","target":["pwd"]},{"name":"微信小程序官网","desc":"微信小程序开发官网。","link":"https://developers.weixin.qq.com/miniprogram/dev/","target":["小程序","hybird"]},{"name":"支付宝小程序官网","desc":"支付宝小程序开发官网。","link":"https://docs.alipay.com/mini/developer/getting-started","target":["小程序","hybird"]},{"name":"百度小程序官网","desc":"百度小程序开发官网。","link":"https://smartprogram.baidu.com/developer/index.html","target":["小程序","hybird"]},{"name":"wepy文档","desc":"vue语法的小程序开发官网。","link":"https://wepyjs.github.io/wepy-docs/","target":["小程序","hybird"]},{"name":"小程序工具集合","desc":"小米轻应用开发官网。","link":"https://github.com/opendigg/awesome-github-wechat-weapp","target":["小程序","hybird"]},{"name":"小米轻应用官网","desc":"小米轻应用开发官网。","link":"https://dev.mi.com/doc/?page_id=2303","target":["轻应用","hybird"]},{"name":"Oppo/vivo快应用官网","desc":"Oppo/vivo轻应用开发官网。","link":"https://www.quickapp.cn/","target":["轻应用","hybird"]},{"name":"华为快应用官网","desc":"华为轻应用开发官网。","link":"https://developer.huawei.com/consumer/cn/quickApp","target":["轻应用","hybird"]},{"name":"React-native 文档","desc":"热门的react语法跨端工具，RN。","link":"https://reactnative.cn/","target":["跨端"]},{"name":"NativeScript","desc":"国外一款流行的跨端开发框架，支持Angular/Vue/Svelte/React。","link":"https://github.com/NativeScript/NativeScript","target":["跨端"]},{"name":"ionic-framework","desc":"一个强大的跨平台UI工具包，用于使用HTML，CSS和JavaScript构建本机质量的iOS，Android和PWA。","link":"https://github.com/ionic-team/ionic-framework","target":["跨端"]},{"name":"quasar-framework","desc":"构建一流的高性能的Vue响应式网站、PWA、SSR、移动和桌面应用","link":"https://github.com/quasarframework/quasar","target":["跨端"]},{"name":"Weex文档","desc":"前几年热门的vue语法跨端工具，现在都不维护了。","link":"https://weex.apache.org/zh/","target":["跨端"]},{"name":"Weex-UI文档","desc":"weex的UI组件库。","link":"https://alibaba.github.io/weex-ui/#/cn/","target":["跨端","weex"]},{"name":"Taro文档","desc":"跨web/小程序/原生的react语法跨端工具，runtime跨端模式。","link":"https://taro.jd.com/","target":["小程序","跨端"]},{"name":"Rax文档","desc":"跨web/小程序/Flutter的react语法跨端工具，阿里。","link":"https://taro.jd.com/","target":["小程序","跨端","Flutter"]},{"name":"Kbone文档","desc":"跨web/小程序跨端构建插件，成本低，适配各类web框架，腾讯。","link":"https://wechat-miniprogram.github.io/kbone/docs/","target":["小程序","跨端"]},{"name":"Hippy文档","desc":"腾讯的一款混合跨端框架。","link":"https://hippyjs.org/","target":["跨端"]},{"name":"uni-app文档","desc":"跨web/小程序/原生的vue语法跨端工具。","link":"https://uniapp.dcloud.io/","target":["小程序","跨端"]},{"name":"北海Kraken","desc":"高性能 Web 渲染引擎，基于 Flutter 构建，可以用web范式写法写Flutter，阿里。","link":"https://openkraken.com/","target":["Kraken"]},{"name":"Remax文档","desc":"React语法跨web/小程序工具，类似于taro-next(3)的跨端模式，对小程序友好，支付宝。","link":"https://github.com/remaxjs/remax","target":["remax"]},{"name":" Antmove ","desc":"小程序转换器，基于支付宝/微信小程序转换为多端小程序，高德。","link":"https://ant-move.github.io/guide/","target":["antmove"]},{"name":"Flutter文档","desc":"超火的Dart语法的跨端开发工具。","link":"https://guoshuyu.cn/home/wx/Flutter-1.html","target":["跨端"]},{"name":"Electron文档","desc":"PC、windows/Mac应用的开发框架。","link":"http://electronjs.org/docs","target":["跨端"]},{"name":"WebView2文档","desc":"PC、windows应用的开发框架，微软。","link":"http://electronjs.org/docs","target":["跨端"]},{"name":"Tauri文档","desc":"Rust 编写的、基于web的 windows/Mac 应用的开发框架。","link":"https://tauri.app/","target":["Tauri"]},{"name":"Pake","desc":"基于Rust Tauri 框架、 打包网页生成很小的桌面 App的脚手架工具，支持 Mac / Windows / Linux 系统。","link":"https://github.com/tw93/Pake","target":["pake"]},{"name":"flyio(fly)文档","desc":"支持Web、Node.js 、微信小程序 、Weex 、React Native 、Quick App的请求封装库。","link":"https://wendux.github.io/dist/#/doc/flyio/readme","target":["fly"]},{"name":"wxParse","desc":"微信小程序富文本解析组件，支持Html及markdown转wxml可视化（但是目前已停止维护）。","link":"https://github.com/icindy/wxParse","target":["wxParse "]},{"name":"chrome extension","desc":"Chrome拓展程序官方文档。","link":"https://developer.chrome.com/extensions","target":["chrome-extension"]},{"name":"chrome-plugin-demo","desc":"一篇很好的Chrome拓展程序开发教程，有demo。","link":"https://github.com/sxei/chrome-plugin-demo","target":["chrome-plugin, chrome-extension"]}]},{"name":"辅助工具","children":[{"name":"chatGPT","desc":"基于OpenAPI的问答机器人，用来查技术问题也挺好。","link":"https://chat.openai.com/chat","target":["chatGPT "]},{"name":"Cursor","desc":"基于OpenAPI GPT-4的编程助手，感觉好像比copilot还流畅一点。","link":"https://www.cursor.so/","target":["cursor "]},{"name":"CodeGeeX","desc":"用于平替Copilot的编程助手，AI、免费。","link":"https://codegeex.cn/zh-CN","target":["CodeGeeX "]},{"name":"stackoverflow.com","desc":"技术问题排忧解难的友好社区。","link":"https://stackoverflow.com/","target":["stackoverflow"]},{"name":"bundlephobia.com","desc":"分析npm软件包的体积和加载性能的网站。","link":"https://bundlephobia.com/","target":["bundlephobia"]},{"name":"npmgraph","desc":"分析npm软件包依赖关系的工具网站。","link":"https://npmgraph.js.org/","target":["npmgraph"]},{"name":"Ts声明文件查询","desc":"各类库的TypeScript声明文件查询网站。","link":"https://www.typescriptlang.org/dt/search?search=","target":["joi"]},{"name":"正则表达式30分钟","desc":"正则上手教程。","link":"http://deerchao.net/tutorials/regex/regex.htm","target":["regexp"]},{"name":"在线正则验证","desc":"可视化在线正则验证网站。","link":"https://regexper.com/","target":["regexper"]},{"name":"cyrilex","desc":"一个在线可视化的正则表达式测试工具和调试器。","link":"https://extendsclass.com/regex-tester.html","target":["cyrilex"]},{"name":"whistle","desc":"web调试代理工具。","link":"http://wproxy.org/whistle/install.html","target":["whistle"]},{"name":"AST explorer","desc":"css/html/js/ts等语言的在线ast解析工具。","link":"https://astexplorer.net/","target":["astexplorer"]},{"name":"husky","desc":"NodeJS上的git工具。","link":"https://github.com/typicode/husky#readme","target":["Husky"]},{"name":"eslint 文档","desc":"js代码检查工具。","link":"https://cn.eslint.org/","target":["eslint"]},{"name":"visualgo","desc":"可视化算法查询。","link":"https://visualgo.net/en","target":["Visualgo"]},{"name":"visualgo","desc":"可视化算法查询。","link":"https://visualgo.net/en","target":["Visualgo"]},{"name":"动画曲线查询","desc":"动画曲线查询网站（ease/linear...）","link":"http://yisibl.github.io/cubic-bezier/#.48,1.06,1,1.45","target":["cubic"]},{"name":"Character Entity Reference Chart","desc":"字符标点的转义字符查询。","link":"https://dev.w3.org/html5/html-author/charref","target":["charref"]},{"name":"gradient-editor","desc":"CSS渐变样式生成工具。","link":"https://www.colorzilla.com/gradient-editor/","target":["gradient-editor"]},{"name":"valineJS","desc":"评论系统工具。","link":"https://valine.js.org/cdn.html","target":["valine"]},{"name":"GitTalk","desc":"github的评论工具。","link":"http://gittalk.com.cutestat.com/","target":["gittalk"]},{"name":"CodeMirror","desc":"web代码文本编辑器，带有大量的语言模式和插件功能。","link":"https://codemirror.net/","target":["codemirror"]},{"name":"webIDE","desc":"web上写代码。","link":"https://github.com/Coding/WebIDE","target":["webide"]},{"name":"Fusuma","desc":"用markdown写web ppt。","link":"https://hiroppy.github.io/fusuma/","target":["fusuma"]},{"name":"stackedit","desc":"在浏览器中运行的Markdown编辑器。","link":"https://stackedit.io/","target":["stackedit "]},{"name":"VuePress","desc":"用markdown写文档/博客","link":"https://vuepress.vuejs.org/zh/","target":["vuepress"]},{"name":"VitePress","desc":"用markdown写文档/博客，VuePress小兄弟，用vite构建","link":"https://vitejs.cn/vitepress/","target":["vitepress"]},{"name":"Hexo","desc":"用markdown写文档/博客","link":"https://hexo.io/zh-cn/","target":["hexo"]},{"name":"dumi","desc":"适合写前端开发文档的工具，markdown，蚂蚁","link":"https://d.umijs.org/","target":["dumi"]},{"name":"jsdoc","desc":"最经典的js代码注释生成文档的工具","link":"https://jsdoc.app/","target":["jsdoc"]},{"name":"jsdoc-to-markdown","desc":"js注释（jsdoc格式）生成markdown文档","link":"https://github.com/jsdoc2md/jsdoc-to-markdown","target":["jsdoc-to-markdown"]},{"name":"materialui","desc":"快速色值选择","link":"https://www.materialui.co/colors","target":["materialui"]},{"name":"carbon","desc":"生成写博客时代码的美腻截图","link":"https://carbon.now.sh/","target":["carbon"]},{"name":"tinypng","desc":"压缩png和jpeg图片","link":"https://tinypng.com/","target":["Tinypng"]},{"name":"svgo","desc":"压缩SVG图形文件工具","link":"https://github.com/svg/svgo","target":["svgo"]},{"name":"svgomg","desc":"压缩SVG图形","link":"https://jakearchibald.github.io/svgomg/","target":["SVGOMG"]},{"name":"ImageMagick","desc":"后台运用极广的图片处理工具。","link":"https://imagemagick.org/index.php","target":["imagemagick"]},{"name":"img2css","desc":"一个有趣的库，利用box-shadow将图片以CSS的方式呈现。","link":"https://github.com/javierbyte/img2css","target":["img2css"]},{"name":"whatfontis.com","desc":"识别图片上的字体不过限于英文字体，需要注册。","link":"https://www.whatfontis.com/","target":["whatfontis"]},{"name":"ps.gaoding.com","desc":"强大的在线Photoshop。","link":"https://ps.gaoding.com/#/","target":["ps"]},{"name":"convert-psd-to-sketch avocode","desc":"psd一键转sketch。","link":"https://avocode.com/convert-psd-to-sketch?ref=producthunt","target":["avocode"]},{"name":"svgomg","desc":"在线svg优化及预览。","link":"https://jakearchibald.github.io/svgomg/","target":["svgomg"]},{"name":"code2flow","desc":"在线伪码转流程图工具。","link":"https://code2flow.com/","target":["code2flow"]},{"name":"tool.lu-json","desc":"在线json格式化工具。","link":"https://tool.lu/json/","target":["json"]},{"name":"tool.lu-js","desc":"在线js格式化/混淆/压缩工具。","link":"https://tool.lu/js/","target":["js"]},{"name":"tool.lu-css","desc":"在线css格式化/压缩/响应式单位处理工具。","link":"https://tool.lu/css/","target":["css"]},{"name":"tool.lu-coderunner","desc":"在线php/c/c++/python/go/js/java/bash代码执行工具。","link":"https://tool.lu/coderunner/","target":["coderunner"]},{"name":"diffchecker.com","desc":"在线文本/文件diff工具。","link":"https://www.diffchecker.com/","target":["diffchecker"]},{"name":"isoflow.io","desc":"在线流程图绘制工具。","link":"https://isoflow.io/","target":["isoflow"]},{"name":" n8n ","desc":"基于自由和开放的公平代码许可节点的工作流自动化工具。轻松自动化跨不同服务的任务。","link":"https://github.com/n8n-io/n8n","target":["n8n"]},{"name":" 阿里云 DNS检测 ","desc":"域名DNS检测网站工具，阿里云。","link":"https://zijian.aliyun.com/detect/dns/DNS_PING-d31c5446aff9db99decd9d9d944b11c5-1640605424801","target":["dns"]},{"name":" Railroad Diagrams ","desc":"在线绘制铁路图的网站工具。","link":"https://tabatkins.github.io/railroad-diagrams/generator.html","target":["railroad-diagrams"]},{"name":"CodeIf","desc":"帮助解决命名困难的命名搜索工具。","link":"https://unbug.github.io/codelf/","target":["codeIf"]},{"name":" QuickType ","desc":"根据 json 文本生成指定语言（如 TypeScript，C++，,Java，C#，Go 等）类型声明代码的工具网站。","link":"https://app.quicktype.io/","target":["QuickType"]},{"name":" 中国独立开发者项目列表 ","desc":"聚合中国独立开发者的项目。","link":"https://github.com/1c7/chinese-independent-developer","target":["chinese-independent-developer"]}]},{"name":"测试、安全及加密","children":[{"name":"单元测试","children":[{"name":"MochaJS文档","desc":"一款单元测试工具。","link":"https://mochajs.org/","target":["mocha"]},{"name":"JestJS文档","desc":"一款单元测试工具。","link":"https://jestjs.io/zh-Hans/","target":["jest"]},{"name":"Cypress官网","desc":"一款单元测试集成平台工具。","link":"https://www.cypress.io/","target":["cypress"]},{"name":"AvaJs","desc":"一款快速的测试工具。","link":"https://github.com/avajs/ava","target":["avajs"]},{"name":"karma","desc":"一款基于Node.js的JavaScript测试执行过程管理工具（Testacular的新名字）。","link":"http://karma-runner.github.io/latest/index.html","target":["karma"]},{"name":"enzyme官网","desc":"一款React单元测试工具，可以测hook。","link":"https://enzymejs.github.io/enzyme/","target":["enzyme"]},{"name":"gremlins.js","desc":"一款node及浏览器的Monkey Test工具。","link":"https://github.com/marmelab/gremlins.js","target":["gremlins"]},{"name":"uptime-kuma","desc":"一款开源的、基于puppeteer的指标监控平台。","link":"https://uptime.kuma.pet/","target":["uptime-kuma"]},{"name":"Playwright","desc":"较新颖的e2e测试工具，支持Chrome、firefox等主流浏览器。","link":"https://playwright.dev/","target":["playwright"]}]},{"name":"安全及加密知识","children":[{"name":"CryptoJS","desc":"一个可以说是最常用的 JavaScript 加密库，支持主流的哈希算法、加密算法,例如 SHA、MD5、AES 等。","link":"https://github.com/brix/crypto-js","target":["crypto-js"]},{"name":"js-sha256","desc":"一个用于 SHA256 哈希运算的轻量级库。","link":"https://github.com/emn178/js-sha256","target":["js-sha256"]},{"name":"Bcrypt","desc":"用于密码散列处理的库。","link":"https://github.com/kelektiv/node.bcrypt.js#readme","target":["bcrypt"]},{"name":"《How to Secure Anything》","link":"https://github.com/veeral-patel/how-to-secure-anything"},{"name":"crypto-js 前端数据加密工具","link":"https://github.com/brix/crypto-js"},{"name":"《浅谈前端安全》","link":"https://cloud.tencent.com/developer/article/1136202"},{"name":"《再谈前端安全》","link":"http://blog.michealwayne.cn/2020/04/19/safety/%E3%80%90%E6%80%BB%E7%BB%93%E3%80%91%E5%86%8D%E8%B0%88%E5%89%8D%E7%AB%AF%E5%AE%89%E5%85%A8/"},{"name":"《8大前端安全问题》","link":"https://mawei.blog/post/frontend-security-vulnerabilities-part1/"},{"name":"《前端加密那点事》","link":"https://juejin.im/post/5c452021518825242062979f"},{"name":"《HTTPS 到底加密了什么？》","link":"https://zhuanlan.zhihu.com/p/38278311"},{"name":"《Web 端反爬虫技术方案》","link":"https://juejin.im/post/5b6d579cf265da0f6e51a7e0"},{"name":"《那些我们该讨论的前端加密方法》","link":"https://juejin.im/entry/5bc93545e51d450e5f3dceff"}]},{"name":"Debug","children":[{"name":"vConsole","desc":"被誉为移动端的web开发者工具，腾讯。","link":"https://github.com/Tencent/vConsole","target":["vconsole"]},{"name":"Eruda","desc":"类似vConsole的移动端web调试工具，相对轻量。","link":"https://eruda.liriliri.io/","target":["eruda"]},{"name":"FunDebug","desc":"简单的项目debug监控工具，有免费版","link":"https://www.fundebug.com/","target":["FunDebug"]},{"name":"Webfunny","desc":"统一的前端异常监控解决方案。","link":"http://www.webfunny.cn/","target":["webfunny_monitor"]},{"name":"json-server","desc":"一款通过本地起服务的快速mock工具。","link":"https://github.com/typicode/json-server","target":["json-server"]},{"name":"Page Spy","desc":"一款集程度较高的远程web调试工具，货拉拉技术团队。","link":"https://www.pagespy.org/","target":["page-spy"]}]},{"name":"质量检测","children":[{"name":"JSLint js代码检查","desc":"一个JavaScript验证工具","link":"http://www.jslint.com/","target":["jslint"]},{"name":"JSHint js代码检查","desc":"一个JavaScript验证工具","link":"https://jshint.com/","target":["jshint"]},{"name":"ESLint js代码检查","desc":"一个JavaScript验证工具","link":"https://eslint.org/","target":["eslint"]},{"name":"CSSLint css代码检查","desc":"一个CSS验证工具","link":"http://csslint.net/","target":["csslint"]},{"name":"Markup Validation Service","desc":"在线HTML验证网站","link":"https://validator.w3.org/","target":["validator"]},{"name":"Flow js代码检查","desc":"一个JavaScript代码检查工具","link":"https://flow.org/","target":["flow"]},{"name":"SonarLint vscode","desc":"js/ts工程代码质量验证的vscode插件","link":"https://www.sonarlint.org/vscode/","target":["sonarlint"]},{"name":"Google eng-practices","desc":"谷歌工程实践文档","link":"https://github.com/google/eng-practices","target":["eng-practices"]},{"name":"Cheerio","desc":"用于web抓取的工具。","link":"https://github.com/cheeriojs/cheerio#readme","target":["cheerio"]},{"name":"Puppeteer官网","desc":"基于chromium的无头浏览器，可用于爬虫等web自动化。","link":"https://pptr.dev/","target":["puppeteer"]},{"name":"Selenium官网","desc":"强大的用于Web应用程序测试的工具。","link":"https://www.selenium.dev/","target":["selenium"]},{"name":"Lighthouse","desc":"Google标准的web性能检测工具，Chrome自带。","link":"https://github.com/GoogleChrome/lighthouse","target":["lighthouse"]},{"name":"Fuite","desc":"web内存检测工具，基于puppeteer。","link":"https://github.com/nolanlawson/fuite","target":["fuite"]},{"name":" xray ","desc":"一款完善的安全评估工具，支持常见 web 安全问题扫描和自定义 poc，不过不开源。","link":"https://github.com/chaitin/xray","target":["xray "]}]}]},{"name":"AI人工智能库","children":[{"name":"LangChain","desc":"著名的大语言模型集成工具，供了一套工具、组件和接口，可简化构建高级语言模型应用程序的过程","link":"https://langchain-langchain.vercel.app/","target":["langchain"]},{"name":"Auto-GPT","desc":"预训练语言生成模型，可以自动完成摘要生成、推荐系统和对话生成等任务，","link":"https://github.com/Significant-Gravitas/Auto-GPT","target":["autoGPT"]},{"name":"AgentGPT","desc":"基于语言模型的人工代理，可以根据特定场景的要求，生成合适的回答","link":"https://github.com/reworkd/AgentGPT","target":["agentGPT"]},{"name":"TensorFlowJS","desc":"在浏览器或Node.js下构建和运行机器学习和深度学习模式的库","link":"https://tensorflow.google.cn/js","target":["tensorflow"]},{"name":"OpenAI Nodejs","desc":"OpenAI 的 Nodejs API 调用封装库","link":"https://github.com/openai/openai-node","target":["openai"]},{"name":"OpenAI node quick start","desc":"OpenAI Nodejs的起步文档及案例","link":"https://github.com/openai/openai-quickstart-node","target":["openai"]},{"name":"Whisper","desc":"OpenAI 语音识别模型（转文字）","link":"https://github.com/openai/whisper","target":["whisper"]},{"name":"awesome chatGPT","desc":"chatGPT/GPT3 工具、demo及文档集合","link":"https://github.com/humanloop/awesome-chatgpt","target":["chatgpt"]},{"name":"awesome chatGPT prompts","desc":"chatGPT问答训练实践集合","link":"https://github.com/f/awesome-chatgpt-prompts","target":["chatgpt"]},{"name":"pipcook","desc":"对web开发者友好的机器学习工具集，阿里","link":"https://alibaba.github.io/pipcook/#/zh-cn/","target":["pipcook"]},{"name":"ml-distance","desc":"计算向量之间的距离或相似度，可用于Embeddings处理","link":"https://github.com/mljs/distance","target":["ml-distance"]},{"name":"Prompt Prefect","desc":"一个优化Prompt的在线工具","link":"https://promptperfect.jinaai.cn/","target":["prompt-prefect"]}]},{"name":"WebAssembly","children":[{"name":"AssemblyScript","desc":"用TypeScript写wasm","link":"https://www.assemblyscript.org/","target":["assemblyscript"]},{"name":"Wasmtime","desc":"一个快速安全的wasm运行时，字节","link":"https://wasmtime.dev/","target":["wasmtime"]},{"name":" WasmExplorer ","desc":"一个在线的wasm playground","link":"https://mbebenita.github.io/WasmExplorer/","target":["WasmExplorer"]}]},{"name":"IDE插件","children":[{"name":"VS","children":[{"name":"MarketPlace","desc":"插件首页","link":"https://marketplace.visualstudio.com/","target":["marketplace"]},{"name":"VSCode在线","desc":"VSCode在线版","link":"https://vscode.dev/","target":["VSCode"]},{"name":"Color Highlight","desc":"颜色预览。","link":"https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight","target":["color-highlight"]},{"name":"Svg Preview","desc":"SVG图形预览。","link":"https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview","target":["svg-preview"]},{"name":"Code Spell Checker","desc":"代码单词拼写校验。","link":"https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker","target":["code-spell-checker"]},{"name":"Beautify","desc":" javascript, JSON, CSS, Sass, 和HTML格式优化。","link":"https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify","target":["beautify"]},{"name":"Bookmarks","desc":" 看代码神器，代码书签。","link":"https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks","target":["bookmarks"]},{"name":"Rainbow Brackets","desc":" 开发必备，括号颜色区分。","link":"https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets","target":["rainbow-brackets"]},{"name":"stylefmt","desc":" css格式化。","link":"https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-stylefmt","target":["stylefmt"]},{"name":"Debugger For Chrome","desc":" vscode和chrome联调插件，本地开发必备。","link":"https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome","target":["debugger-for-chrome"]},{"name":"Eslint插件","desc":" js检查。","link":"https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint","target":["eslint"]},{"name":"stylelint","desc":" css/less/scss检查。","link":"https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint","target":["stylelint"]},{"name":"TypeScript Tslint Plugin","desc":" TypeScript检查。","link":"https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin","target":["typescript-tslint-plugin"]},{"name":"vetur","desc":" Vue开发工具。","link":"https://marketplace.visualstudio.com/items?itemName=octref.vetur","target":["vetur"]},{"name":"Dart","desc":" Dart语言开发支持。","link":"https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code","target":["dart-code"]},{"name":"Flutter","desc":" Flutter开发适配。","link":"https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter","target":["Flutter"]},{"name":"HTML Snippets","desc":" HTML标签快速开发。","link":"https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets","target":["html-snippets"]},{"name":"Identical Sublime Monokai","desc":" 本人还是习惯sublime的风格。","link":"https://marketplace.visualstudio.com/items?itemName=maximetinu.identical-sublime-monokai-csharp-theme-colorizer","target":["identical-sublime-monokai"]},{"name":"Markdownlint","desc":" markdown检查。","link":"https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint","target":["markdownlint"]},{"name":"Minify","desc":" js/css直接压缩。","link":"https://marketplace.visualstudio.com/items?itemName=HookyQR.minify","target":["minify"]},{"name":"polacode","desc":"代码截图的vscode IDE插件","link":"https://marketplace.visualstudio.com/items?itemName=pnp.polacode","target":["polacode"]},{"name":"GitLens","desc":"git源代码管理插件","link":"https://gitlens.amod.io/","target":["gitlens"]},{"name":"Project Manager","desc":"本地项目管理","link":"https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager","target":["project-manager"]},{"name":"JavaScript Booster","desc":"js/ts快速重构优化工具，比如将var换为const/let。","link":"https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster","target":["javascript-booster"]}]}]},{"name":"生活篇","children":[{"name":"HowToCook","desc":"程序员在家做饭方法指南。","link":"https://github.com/Anduin2017/HowToCook","target":["HowToCook"]},{"name":"HowToLiveLonger","desc":"程序员延寿指南。","link":"https://github.com/geekan/HowToLiveLonger","target":["HowToLiveLonger"]}]}]},{"name":"-","children":[{},{}]},{"children":[{"name":"utils说明","children":[{"name":"基础工具库"},{"name":"浏览器端封装库"},{"name":"Nodejs基础工具库"},{"name":"Nodejs图片工具"},{"name":"Canvas图形绘制封装"}]},{"name":"--nodejs","children":[{"name":"fe-templates"}]},{}]}]
\ No newline at end of file
diff --git a/utils/packages/ai-utils/src/applications/createUnitTestCases.ts b/utils/packages/ai-utils/src/applications/createUnitTestCases.ts
new file mode 100644
index 00000000..c633ca9a
--- /dev/null
+++ b/utils/packages/ai-utils/src/applications/createUnitTestCases.ts
@@ -0,0 +1,38 @@
+/**
+ * @author Wayne
+ * @Date 2024-05-11 10:40:18
+ * @LastEditTime 2024-05-11 10:47:53
+ */
+import { estimateTokenLength } from '../llm/prompts';
+const MAX_TOKEN_LEN = 4000; // GPT3.5 4096
+
+export function getCreateUnitTestCases(patch: string) {
+ return `### Unit Test ###
+You are an expert software tester tasked with thoroughly testing a given piece of code, you are proficient in JavaScript/TypeScript.
+Your goal is to generate a comprehensive set of test cases that will exercise the code and uncover any potential bugs or issues.
+
+First, carefully analyze the provided code. Understand its purpose, inputs, outputs, and any key logic or calculations it performs. Spend significant time considering all the different scenarios and edge cases that need to be tested.
+
+Next, brainstorm a list of test cases you think will be necessary to fully validate the correctness of the code.
+Your current role is: UnitTest code generator
+##
+- use jest test framework
+- use typescript
+- the test environment is Node.js
+- only generate code with no explain
+- write the\`prepareChatMessages\` and \`getFirstAnswerMsg\` and \`setChatMessages\` and \`setModel\` method's unit test cases
+Here is your target code to generate tests:
+\`\`\`
+{{your_code_here}}
+\`\`\`
+`;
+}
+
+export function genUnitTestCasesPrompt(codeStr: string, maxLen = MAX_TOKEN_LEN) {
+ const promptTxt = getCreateUnitTestCases(codeStr);
+
+ if (estimateTokenLength(promptTxt) > maxLen) {
+ return '';
+ }
+ return promptTxt;
+}
diff --git a/utils/packages/ai-utils/src/index.ts b/utils/packages/ai-utils/src/index.ts
index 8e9b4504..7f4c4e86 100644
--- a/utils/packages/ai-utils/src/index.ts
+++ b/utils/packages/ai-utils/src/index.ts
@@ -1,11 +1,12 @@
/**
* @author Wayne
* @Date 2023-09-05 09:38:19
- * @LastEditTime 2023-11-11 10:17:13
+ * @LastEditTime 2024-05-11 10:54:24
*/
// gpt application
export * from './applications/codeReview';
export * from './applications/sql';
+export * from './applications/createUnitTestCases';
// llm utils
export * from './llm/prompts';
diff --git a/utils/packages/canvas-utils/src/utils/animate.ts b/utils/packages/canvas-utils/src/utils/animate.ts
index 8406bf91..4effb104 100644
--- a/utils/packages/canvas-utils/src/utils/animate.ts
+++ b/utils/packages/canvas-utils/src/utils/animate.ts
@@ -21,9 +21,9 @@ const timingFunction = (pos: number) => {
const IS_LT_HALF = (pos /= THRESHOLD_VAL) < 1;
if (IS_LT_HALF) {
return THRESHOLD_VAL * Math.pow(pos, 3);
- } else {
- return THRESHOLD_VAL * (Math.pow(pos - 2, 3) + 2);
}
+
+ return THRESHOLD_VAL * (Math.pow(pos - 2, 3) + 2);
};
/**
@@ -43,14 +43,14 @@ let createAnimationFrame = function () {
return requestAnimationFrame;
};
return requestAnimationFrame;
- } else {
- // abnormal webview or nodejs
- return function (step: (num: number) => void, delay: number) {
- setTimeout(function () {
- step(+new Date());
- }, delay);
- };
}
+
+ // abnormal webview or nodejs
+ return function (step: (num: number) => void, delay: number) {
+ setTimeout(function () {
+ step(+new Date());
+ }, delay);
+ };
};
interface AnimationOptions {
diff --git a/utils/packages/canvas-utils/src/utils/base.ts b/utils/packages/canvas-utils/src/utils/base.ts
index d72dc1e6..b3a2c3ca 100644
--- a/utils/packages/canvas-utils/src/utils/base.ts
+++ b/utils/packages/canvas-utils/src/utils/base.ts
@@ -109,5 +109,5 @@ export const cloneArray = (fromArr: unknown[], toArr: unknown[]): unknown[] => {
* @param {string} detail 错误单元细节
*/
export function throwError(info: unknown, part = '', detail = ''): never {
- throw new Error(`Error!${info}.(FundCharts-${part} ${detail})`);
+ throw new Error(`Error!${info}.(${part} ${detail})`);
}