mx3d 2024.1.22 → 2024.6.2-8.1

package/docs/gui/2D.md

@@ -0,0 +1,153 @@
+## 初始化
+
+```javascript
+/// <param name="id">所要挂靠的物体id</param>
+/// <param name="object">x需挂载的对象</param>
+/// <param name="height">size: { width: UI宽度, height: UI高度 }</param>
+/// <param name="_height">离地高度</param>
+let gui = MX3D.UI.createIcon(id: "string", IObject: object, size: { width: number, height: number }, _height: number);
+```
+
+## 设置背景图片
+
+```javascript
+/// <param name="background">设置背景图片</param>
+gui.background = '/icons/camera.png'
+```
+
+## 设置文字
+
+```javascript
+/// <param name="textArr">需创建的文字集合</param>
+/// <param name="textArr.text">文字</param>
+/// <param name="textArr.fontSize">字体大小</param>
+/// <param name="textArr.color">字体颜色</param>
+/// <param name="textArr.top">顶部偏移</param>
+/// <param name="textArr.left">左侧偏移</param>
+//注：默认偏移为gui中心点
+let textArr = [
+  { text: '27.5℃', fontSize: '12', color: '#dea32c', top: -12, left: 20 },
+  { text: '68.22%', fontSize: '12', color: '#009ad6', top: 14, left: 20 },
+]
+gui.setTexts(textArr)
+```
+
+## 点击事件
+
+```javascript
+/// <param name="Function">回调方法</param>
+gui.onPointerClick = Function
+```
+
+## 显示隐藏
+
+```javascript
+gui.isEnabled(true)
+```
+
+## 销毁
+
+```javascript
+gui.dispose()
+```
+
+## 示例
+
+### 代码
+
+```javascript
+//创建
+var uis = []
+var _objs = app.project.findObjectsByCustomType('Humiture', {
+  isCurrent: false,
+  isEnabled: true,
+})
+for (let i = 0; i < _objs.length; i++) {
+  let gui = MX3D.UI.createIcon(
+    'UI_' + i,
+    _objs[i],
+    { width: 200, height: 150 },
+    0.6
+  )
+  gui.background = './gui/bg.png'
+  let textArr = [
+    { text: '27.5℃', fontSize: '20', color: '#dea32c', top: -30, left: 40 },
+    { text: '68.22%', fontSize: '20', color: '#009ad6', top: 5, left: 40 },
+  ]
+  gui.setTexts(textArr)
+  uis.push(gui)
+}
+//显示
+for (let i = 0; i < uis.length; i++) {
+  uis[i].isEnabled(true)
+}
+//隐藏
+for (let i = 0; i < uis.length; i++) {
+  uis[i].isEnabled(false)
+}
+//销毁
+for (let i = 0; i < uis.length; i++) {
+  uis[i].dispose()
+}
+uis = []
+```
+
+### 示例
+
+<div id="container" style="width: 100%;height: 500px;position: relative;">
+<div style="position: absolute;top: 20px;left: 20px;width: 120px;z-index: 5;" class="btn-group-vertical" role="group">
+  <button type="button" id="but_create" class="btn btn-default">创建</button>
+  <button type="button" id="but_show" class="btn btn-default">显示</button>
+  <button type="button" id="but_hide" class="btn btn-default">隐藏</button>
+  <button type="button" id="but_dispose" class="btn btn-default">销毁</button>
+</div>
+</div>
+
+<script>
+   MX3D.accessToken = "0498A36E67B5ED17E7A7B23D0AC4ACB2E1D6DE1209A0C0894BA0B6973C606201DDCEF2EACFE268AB31FBE04616680A3F453EA85544AE248BA2B115141E029B13C3C90718BA0F15AE6A78BA9F3D70C41650FA4EDDC64D1DEFE5CBA2767EC3A52B347393871ACAC3FF01DF62EAF2F0AEB93578E90EB1F3B7B0793949E88BB4AF1EBB9AA0B0635B93738EC96287638F8716DD6FAC6087C8C8BE4F674F3853042BC60E391D9F5D54";
+   app = new MX3D.App({
+     container: document.getElementById("container")
+    });
+   app.load({
+        pk: "9a0b0f36-f283-49b5-b964-9a3bc630abda",
+        progress: (_x) => { //加载进度
+          console.log(_x)
+        },
+        complete:()=>{ ///加载完成
+          console.log("加载完成");
+          // console.log(parseInt(new Date().getTime() - _t) / 1000);
+        }
+  });
+
+  var uis=[];
+
+  $("#but_create").click(function(){
+    var _objs = app.project.findObjectsByCustomType('Humiture',{ isCurrent: false, isEnabled: true });
+    for (let i = 0; i < _objs.length; i++) {
+      let gui = MX3D.UI.createIcon("UI_"+i, _objs[i], { width: 445/2.2, height: 334/2.2 }, 0.6);
+      gui.background = './gui/bg.png';
+      let textArr= [
+          { text: '27.5℃', fontSize: '20', color: '#dea32c', top: -30, left: 40 },
+          { text: '68.22%', fontSize: '20', color: '#009ad6', top: 5, left: 40 },
+      ]
+      gui.setTexts(textArr)
+      uis.push(gui);
+    }
+  });
+  $("#but_show").click(function(){
+     for (let i = 0; i < uis.length; i++) {
+       uis[i].isEnabled(true)
+     }
+  });
+   $("#but_hide").click(function(){
+     for (let i = 0; i < uis.length; i++) {
+       uis[i].isEnabled(false)
+     }
+  });
+  $("#but_dispose").click(function(){
+     for (let i = 0; i < uis.length; i++) {
+       uis[i].dispose()
+     }
+     uis=[];
+  });
+</script>

package/docs/gui/3D.md

@@ -0,0 +1,154 @@
+## 初始化
+
+```javascript
+/// <summary>
+/// 创建3dUI
+/// </summary>
+/// <param name="_id">UI编号；自定义</param>
+/// <param name="_anchor">需挂载的对象</param>
+/// <param name="_scaling">大小</param>
+/// <param name="_height">相对于物体高度</param>
+/// <param name="_app">场景实例</param>
+let gui = MX3D.UI.createIconFromMesh(_id: string, _anchor: IObject, _scaling: number, _height: number);
+// let gui = MX3D.UI.createIconFromMesh('_campus.children[8].id', 10, 0, app);
+```
+
+## 设置背景
+
+```javascript
+/// <param>背景图片路径</param>
+await gui.setBackground('./gui/bg.png');
+```
+
+## 设置文字
+
+```javascript
+/// <param name="textArr">需创建的文字集合</param>
+/// <param name="textArr.text">文字</param>
+/// <param name="textArr.fontSize">字体大小</param>
+/// <param name="textArr.color">字体颜色</param>
+/// <param name="textArr.top">顶部偏移</param>
+/// <param name="textArr.left">左侧偏移</param>
+//注：无法确定偏移中心，需多次测试确定
+let textArr = [
+  { text: '27.5℃', fontSize: '50px', color: '#dea32c', top: 120, left: 230 },
+  { text: '68.22%', fontSize: '50px', color: '#009ad6', top: 200, left: 230 },
+]
+gui.setContents(textArr)
+```
+
+## 点击事件
+
+```javascript
+/// <param name="_action">回调方法</param>
+gui.addEventListener(_action: Function)
+```
+
+## 显示隐藏
+
+```javascript
+gui.isEnabled(true)
+```
+
+## 销毁
+
+```javascript
+gui.dispose()
+```
+
+## 示例
+
+### 代码
+
+```javascript
+//创建
+var uis = []
+var _objs = app.project.findObjectsByCustomType('Humiture', {
+  isCurrent: false,
+  isEnabled: true,
+})
+for (let i = 0; i < _objs.length; i++) {
+  let gui = MX3D.UI.createIconFromMesh('UI_' + i,_objs[i],2,0.5);
+  await gui.setBackground('./gui/bg.png');
+
+  let textArr = [
+    { text: '27.5℃', fontSize: '50px', color: '#dea32c', top: 120, left: 230 },
+    { text: '68.22%', fontSize: '50px', color: '#009ad6', top: 200, left: 230 },
+  ]
+  gui.setContents(textArr)
+  uis.push(gui)
+}
+//显示
+for (let i = 0; i < uis.length; i++) {
+  uis[i].isEnabled(true)
+}
+//隐藏
+for (let i = 0; i < uis.length; i++) {
+  uis[i].isEnabled(false)
+}
+//销毁
+for (let i = 0; i < uis.length; i++) {
+  uis[i].dispose()
+}
+uis = []
+```
+
+### 效果
+
+<div id="container" style="width: 100%;height: 500px;position: relative;">
+<div style="position: absolute;top: 20px;left: 20px;width: 120px;z-index: 5;" class="btn-group-vertical" role="group">
+  <button type="button" id="but_create" class="btn btn-default">创建</button>
+  <button type="button" id="but_show" class="btn btn-default">显示</button>
+  <button type="button" id="but_hide" class="btn btn-default">隐藏</button>
+  <button type="button" id="but_dispose" class="btn btn-default">销毁</button>
+</div>
+</div>
+
+<script>
+   MX3D.accessToken = "0498A36E67B5ED17E7A7B23D0AC4ACB2E1D6DE1209A0C0894BA0B6973C606201DDCEF2EACFE268AB31FBE04616680A3F453EA85544AE248BA2B115141E029B13C3C90718BA0F15AE6A78BA9F3D70C41650FA4EDDC64D1DEFE5CBA2767EC3A52B347393871ACAC3FF01DF62EAF2F0AEB93578E90EB1F3B7B0793949E88BB4AF1EBB9AA0B0635B93738EC96287638F8716DD6FAC6087C8C8BE4F674F3853042BC60E391D9F5D54";
+   app = new MX3D.App({
+     container: document.getElementById("container")
+    });
+   app.load({
+        pk: "9a0b0f36-f283-49b5-b964-9a3bc630abda",
+        progress: (_x) => { //加载进度
+          console.log(_x)
+        },
+        complete:()=>{ ///加载完成
+          console.log("加载完成");
+          // console.log(parseInt(new Date().getTime() - _t) / 1000);
+        }
+  });
+
+  var uis=[];
+
+  $("#but_create").click( async()=>{
+    var _objs = app.project.findObjectsByCustomType('Humiture', {isCurrent: false,isEnabled: true})
+for (let i = 0; i < _objs.length; i++) {
+  let gui = MX3D.UI.createIconFromMesh('UI_' + i,_objs[i],2,0.5);
+  await gui.setBackground('./gui/bg.png');
+  let textArr = [
+    { text: '27.5℃', fontSize: '50px', color: '#dea32c', top: 120, left: 230 },
+    { text: '68.22%', fontSize: '50px', color: '#009ad6', top: 200, left: 230 },
+  ]
+  gui.setContents(textArr)
+  uis.push(gui)
+}
+  });
+  $("#but_show").click(function(){
+     for (let i = 0; i < uis.length; i++) {
+       uis[i].isEnabled(true)
+     }
+  });
+   $("#but_hide").click(function(){
+     for (let i = 0; i < uis.length; i++) {
+       uis[i].isEnabled(false)
+     }
+  });
+  $("#but_dispose").click(function(){
+     for (let i = 0; i < uis.length; i++) {
+       uis[i].dispose()
+     }
+     uis=[];
+  });
+</script>

package/docs/heatMap/heatMap.md

@@ -0,0 +1,290 @@
+## 矩阵云图
+
+```javascript
+ /// <summary>
+  /// 创建矩阵温度云图
+  /// </summary>
+  /// <param name="anchor">挂载的物体(非空)</param>
+  /// <param name="value">云图原数据(非空)
+  ////// <param name="column">云图总行</param>
+  ////// <param name="row">云图总列</param>
+  ////// <param name="data">云图点位值</param>
+  /// </param>
+  /// <param name="height">距离挂载物体高度</param>
+  /// <param name="isAlpha">云图是否透明；默认为true</param>
+  /// <param name="isParticle">是否生成粒子体积云图；默认为true</param>
+  /// <param name="radius">云图辐射半径</param>
+  /// <param name="range">云图范围</param>
+  var map= MX3D.Builder.createMatrixCloud({
+    anchor: IObject,
+    value: {
+      maxX: number, maxY: number,
+      data: Array<{ x: number, y: number, value: number }>
+    },
+    displayValues: boolean,
+    height: number,
+    isLevelRender: boolean,
+    isAlpha: boolean,
+    isParticle: boolean,
+    radius: number,
+    range: { max: number, min: number }
+  });
+```
+
+## 点状云图
+
+```javascript
+/// <summary>
+/// 创建点状云图
+/// </summary>
+/// <param name="anchor">挂载的物体(非空)</param>
+/// <param name="value">数值(非空)></param>
+/// <param name="displayValues">是否显示数值；默认：false></param>
+/// <param name="isAlpha">云图是否透明；默认为true</param>
+/// <param name="isParticle">是否生成粒子体积云图；默认为true</param>
+/// <param name="radius">云图大小;默认:1</param>
+/// <param name="range">云图区间</param>
+var map = MX3D.Builder.createPunctateCloud({
+  anchor: IObject,
+  value: number,
+  radius: number,
+  isLevelRender: boolean,
+  displayValues: boolean,
+  isAlpha: boolean,
+  isParticle: boolean,
+  range: { max: number, min: number },
+})
+```
+
+## 柱状云图
+
+```javascript
+  /// <summary>
+  /// 创建柱状温度云图
+  /// </summary>
+  /// <param name="anchor">挂载的物体(非空)</param>
+  /// <param name="data">云图原数据(非空)></param>
+  /// <param name="displayValues">是否显示数值；默认：false></param>
+  /// <param name="isAlpha">云图是否透明；默认为true</param>
+  /// <param name="isParticle">是否生成粒子体积云图；默认为true</param>
+  /// <param name="radius">云图辐射半径</param>
+  /// <param name="range">云图颜色区间</param>
+  var map= MX3D.Builder.createColumnCloud({
+    anchor: IObject,
+    data: Array<{ index: number, value: number }>,
+    displayValues: boolean = false,
+    isAlpha: boolean = true,
+    isParticle: boolean = true,
+    radius: number = 4,
+    range: { max: number, min: number } = { max: 30, min: 16 }
+    });
+```
+
+## 示例
+
+### 代码
+
+```javascript
+//创建的云图
+var maps = []
+
+///矩阵云图
+var data = [
+  { y: 6, x: 4, value: 25.32 },
+  { y: 4, x: 10, value: 27.57 },
+  { y: 4, x: 3, value: 27.57 }
+  ...
+]
+var _obj = app.project.findObjectsByCustomType('Floor', {isCurrent: false,isEnabled: true})[1];
+var map = MX3D.Builder.createMatrixCloud({
+  anchor: _obj,
+  value: {
+    maxX: 12,
+    maxY: 9,
+    data: data,
+  },
+  height: 1,
+})
+maps.push(map)
+
+///柱状云图
+var _objs = app.project.findObjectsByCustomType('Cabinet', {isCurrent: false,isEnabled: true})
+for (let i = 0; i < _objs.length; i++) {
+  let gui = MX3D.Builder.createColumnCloud({
+    anchor: _objs[i],
+    data: [
+      { index: 0, value: 25 },
+      { index: 0, value: 27 },
+      { index: 0, value: 29 },
+    ],
+  })
+}
+
+//点状云图
+var _objs = app.project.findObjectsByCustomType('Humiture', {isCurrent: false,isEnabled: true})
+for (let i = 0; i < _objs.length; i++) {
+  let map = MX3D.Builder.createPunctateCloud({
+    anchor: _objs[i],
+    value: 25
+  })
+  maps.push(map)
+}
+//销毁
+for (let i = 0; i < maps.length; i++) {
+  maps[i].dispose()
+}
+```
+
+### 效果
+
+<div id="container" style="width: 100%;height: 500px;position: relative;">
+<div style="position: absolute;top: 20px;left: 20px;width: 120px;z-index: 5;" class="btn-group-vertical" role="group">
+  <button type="button" id="but_createMatrixHeatMap" class="btn btn-default">平面云图</button>
+  <button type="button" id="but_createColumnarHeatMap" class="btn btn-default">柱状云图</button>
+  <button type="button" id="but_createPunctateCloud" class="btn btn-default">点状云图</button>
+  <button type="button" id="but_detele" class="btn btn-default">销毁</button>
+</div>
+</div>
+
+<script>
+   MX3D.accessToken = "0498A36E67B5ED17E7A7B23D0AC4ACB2E1D6DE1209A0C0894BA0B6973C606201DDCEF2EACFE268AB31FBE04616680A3F453EA85544AE248BA2B115141E029B13C3C90718BA0F15AE6A78BA9F3D70C41650FA4EDDC64D1DEFE5CBA2767EC3A52B347393871ACAC3FF01DF62EAF2F0AEB93578E90EB1F3B7B0793949E88BB4AF1EBB9AA0B0635B93738EC96287638F8716DD6FAC6087C8C8BE4F674F3853042BC60E391D9F5D54";
+   app = new MX3D.App({
+     container: document.getElementById("container")
+    });
+   app.load({
+        pk: "9a0b0f36-f283-49b5-b964-9a3bc630abda",
+        progress: (_x) => { //加载进度
+          console.log(_x)
+        },
+        complete:()=>{ ///加载完成
+          console.log("加载完成");
+          // console.log(app.project.getSceneTree());
+        }
+  });
+
+
+  var maps=[];
+
+
+  $("#but_createMatrixHeatMap").click(function(){
+     var data = [
+  { y: 6, x: 4, value: 25.32 },
+  { y: 4, x: 10, value: 27.57 },
+  { y: 4, x: 3, value: 27.57 },
+  { y: 6, x: 7, value: 27.12 },
+  { y: 6, x: 6, value: 27.12 },
+  { y: 4, x: 11, value: 27.12 },
+  { y: 3, x: 4, value: 27.12 },
+  { y: 6, x: 3, value: 27.13 },
+  { y: 4, x: 8, value: 27.13 },
+  { y: 3, x: 6, value: 27.13 },
+  { y: 3, x: 5, value: 27.13 },
+  { y: 3, x: 2, value: 27.13 },
+  { y: 1, x: 7, value: 27.13 },
+  { y: 6, x: 2, value: 27.78 },
+  { y: 3, x: 7, value: 27.78 },
+  { y: 3, x: 1, value: 27.78 },
+  { y: 1, x: 4, value: 27.78 },
+  { y: 5, x: 2, value: 28.26 },
+  { y: 3, x: 8, value: 28.26 },
+  { y: 3, x: 0, value: 28.26 },
+  { y: 8, x: 8, value: 29.76 },
+  { y: 5, x: 1, value: 29.76 },
+  { y: 4, x: 0, value: 29.76 },
+  { y: 3, x: 9, value: 29.76 },
+  { y: 6, x: 1, value: 28.24 },
+  { y: 5, x: 0, value: 28.24 },
+  { y: 3, x: 11, value: 28.24 },
+  { y: 3, x: 10, value: 28.24 },
+  { y: 0, x: 1, value: 28.24 },
+  { y: 6, x: 9, value: 28.61 },
+  { y: 6, x: 0, value: 28.61 },
+  { y: 5, x: 10, value: 28.61 },
+  { y: 6, x: 10, value: 25.61 },
+  { y: 5, x: 9, value: 25.61 },
+  { y: 5, x: 11, value: 25.86 },
+  { y: 5, x: 8, value: 25.86 },
+  { y: 5, x: 7, value: 27.04 },
+  { y: 4, x: 2, value: 27.04 },
+  { y: 4, x: 1, value: 27.04 },
+  { y: 4, x: 9, value: 25.17 },
+  { y: 4, x: 5, value: 25.17 },
+  { y: 4, x: 4, value: 25.17 },
+  { y: 4, x: 6, value: 28.69 },
+  { y: 4, x: 7, value: 27.3 },
+  { y: 6, x: 11, value: 27.49 },
+  { y: 6, x: 8, value: 27.49 },
+  { y: 3, x: 3, value: 27.49 },
+  { y: 5, x: 4, value: 26.09 },
+  { y: 5, x: 5, value: 27.1 },
+  { y: 6, x: 5, value: 29.49 },
+  { y: 5, x: 6, value: 26.7 },
+]
+   var _obj = app.project.findObjectsByCustomType("Floor",{ isCurrent: false, isEnabled: true })[0];
+   var map = MX3D.Builder.createMatrixCloud({
+       anchor:_obj,
+       value:{
+           maxX: 12,
+           maxY: 9,
+           data: data,
+       },
+       height:1
+     })
+     maps.push(map);
+  });
+
+
+  $("#but_createColumnarHeatMap").click(function(){
+   var _objs = app.project.findObjectsByCustomType('Cabinet',{ isCurrent: false, isEnabled: true });
+   //for (let i = 0; i < _objs.length; i++) {
+     let map = MX3D.Builder.createColumnCloud({anchor:_objs[0],data:[{index: 0,value: 25},{index: 0,value: 27},{index: 0,value: 29}]});
+     maps.push(map);
+   //}  
+  });
+
+  $("#but_createPunctateCloud").click(function(){
+   var _objs = app.project.findObjectsByCustomType('Humiture',{ isCurrent: false, isEnabled: true });
+   for (let i = 0; i < _objs.length; i++) {
+     let map = MX3D.Builder.createPunctateCloud({anchor:_objs[i],value:25});
+     maps.push(map);
+   }  
+  });
+
+   $("#but_detele").click(function(){
+      for (let i = 0; i < maps.length; i++) {
+        maps[i].dispose();
+      }
+      maps=[];
+  });
+</script>
+
+## 云图属性
+
+### 显示隐藏云图
+
+```javascript
+/// <summary>
+/// 显示隐藏云图
+/// </summary>
+/// <param name="_bool">true||false</param>
+map.isEnabled(_bool: boolean);
+```
+
+### 显示隐藏数值
+
+```javascript
+/// <summary>
+/// 显示隐藏数值
+/// </summary>
+/// <param name="_bool">true||false</param>
+map.displayValues=_bool: boolean;
+```
+
+### 销毁云图
+
+```javascript
+/// <summary>
+/// 销毁云图
+/// </summary>
+map.dispose()
+```

package/docs/index.html

@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+
+<head>
+    <meta charset="UTF-8">
+    <title>SDK</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="description" content="Description">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+
+    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
+    <script src="./js/bootstrap/jquery.min.js"></script>
+    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
+    <link rel="stylesheet" href="./js/bootstrap/bootstrap.min.css">
+    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
+    <link rel="stylesheet" href="./js/bootstrap/bootstrap-theme.min.css">
+    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
+    <script src="./js/bootstrap/bootstrap.min.js"></script>
+
+    <!-- 蓝黑色主题 -->
+    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css"> -->
+    <!-- 黑色主题 -->
+    <!-- <link rel="stylesheet" href="./css/dark.css"> -->
+    <link rel="stylesheet" href="./css/vue.css">
+    <!-- <script src="../dist/mx3d.seat.min.js"></script>
+    <script src="/mx3d.js"></script> -->
+    <script src="../mx3d.seat.min.js"></script>
+    <script src="../mx3d.min.js"></script>
+    <!-- <script src="/core/mx3d.seat.min.js"></script>
+    <script src="../mx3d.js"></script> -->
+    <!-- <script src="/dist/mx3d.kernel.min.js"></script>
+    <script src="/dist/mx3d.min.js"></script> -->
+    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/themes/buble.css"> -->
+    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/themes/dark.css"> -->
+    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/themes/pure.css"> -->
+    <!-- <link rel="stylesheet" href="//unpkg.com/docsify/themes/dolphin.css"> -->
+</head>
+
+<body>
+    <div id="app"></div>
+    <script>
+        window.$docsify = {
+            // routerMode: 'history',
+            name: '我搭世界sdk教程文档',
+            // repo: 'http://192.168.21.99:8080/MJ.GZ/sdk_v2.git',
+            loadSidebar: true,
+            subMaxLevel: 3,
+            executeScript: true,
+            alias: {
+                '/.*/_sidebar.md': '/_sidebar.md'
+            },
+            auto2top: true, //切换页面后是否自动跳转到页面顶部
+            //全文搜索
+            search: {
+                maxAge: 86400000, // 过期时间，单位毫秒，默认一天
+                paths: 'auto',
+                placeholder: '搜索',
+                noData: '找不到结果',
+                // 搜索标题的最大程级, 1 - 6
+                depth: 4,
+            },
+            vueComponents: {
+                'button-counter': {
+                    template: `<button @click="count += 1">You clicked me {{ count }} times</button>`,
+                    data() {
+                        return {
+                            count: 0,
+                        };
+                    },
+                    methods: {
+                        greet(event) {
+                            // `this` inside methods points to the current active instance
+                            alert(`Hello ${this.name}!`)
+                            // `event` is the native DOM event
+                            if (event) {
+                                alert(event.target.tagName)
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <!-- Docsify v4 -->
+    <!-- <script src="//cdn.jsdelivr.net/npm/docsify@4"></script> -->
+    <script src="./js/docsify@4.min.js"></script>
+    <script src="./js/search.min.js"></script>
+</body>
+
+</html>