fix: 文档完善

This commit is contained in:
zhangyu
2024-05-27 15:19:04 +08:00
parent 31e9e0668b
commit 32118cf070
33 changed files with 460 additions and 4 deletions

View File

@@ -44,7 +44,6 @@ export const sidebar = {
text: 'table',
link: '/table',
items: [
{ text: 'deleteButton', link: '/deleteButton',},
{
text: 'nzDataList',
link: '/nzDataList',
@@ -54,11 +53,35 @@ export const sidebar = {
{text:'bottomBox', link: '/bottomBox'},
]
},
{ text: 'rightBox', link: '/rightBox',},
{ text: 'nzDetailView', link: '/nzDetailView',},
{ text: 'deleteButton', link: '/deleteButton',},
{ text: 'rightBox', link: '/rightBox',},
]
}
],
},
{
text: '其他组件',
items:[
{text:'clickSearch', link: '/clickSearch'},
{text:'promqlInput', link: '/promqlInput'},
]
},
{
text: '引用插件',
items:[
{text:'le5le', link: '/le5le'},
{text:'map', link: '/map'},
{text:'xterm', link: '/xterm'},
{text:'时间插件', link: '/time'},
{text:'Quill', link: '/quill'},
]
},
{
text: '注意事项',
link: '/note',
}
],
};

View File

@@ -0,0 +1,29 @@
---
map:
path: /le5le
---
# 官方文档
https://doc.le5le.com/document/119882449
拓扑图相关插件
# 注意事项
1. 图片在本地无法显示,若需要显示 可以在图片url前添加对应的网址
2. 鼠标框选错位
原因
父 dom 元素 css 还没渲染完就加载画布确认方式new Meta2d 时,查看父 dom 的 clientWidth 和 clientHeight 是否存在;
修改了父 dom 元素位置,可能是存在动画
解决方案
等待父 dom 元素 css 加载完成后在 new Meta2d
确定画布位置已经稳定时,修正画布位置: meta2d.resize();
3. 报错pen无calculative属性
是否使用了 meta2d.data() 获取的pens进行操作 meta2d.data() 仅仅用于文件保存。改用 meta2d.store.data.pens 获取画布中的对象即可。
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,12 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,30 @@
---
map:
path: /le5le
---
# 官方文档
https://doc.le5le.com/document/119882449
拓扑图相关插件
# 注意事项
1. 图片在本地无法显示,若需要显示 可以在图片url前添加对应的网址
2. 鼠标框选错位
原因
父 dom 元素 css 还没渲染完就加载画布确认方式new Meta2d 时,查看父 dom 的 clientWidth 和 clientHeight 是否存在;
修改了父 dom 元素位置,可能是存在动画
解决方案
等待父 dom 元素 css 加载完成后在 new Meta2d
确定画布位置已经稳定时,修正画布位置: meta2d.resize();
3. 报错pen无calculative属性
是否使用了 meta2d.data() 获取的pens进行操作 meta2d.data() 仅仅用于文件保存。改用 meta2d.store.data.pens 获取画布中的对象即可。
<API src="./index.vue" lang="zh"></API>

View File

@@ -0,0 +1,24 @@
---
map:
path: /map
---
地图插件
# 官方文档
api: https://maplibre.org/maplibre-gl-js/docs/API/
examples: https://maplibre.org/maplibre-gl-js/docs/examples/
style: https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/
# 注意事项
1. 开发时可以先参考examples找到对应的例子 再通过api查看详细设置
2. 地图样式支持配置 需要登陆 maptilerCloud 注册对应账号 即可查看
3. 修改样式可以在 cloud 编辑对应样式 左侧页面查看 之后保存对应的json
4. 注意引用时 新增一些图层可能需要新的外部文件
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,12 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,24 @@
---
map:
path: /map
---
地图插件
# 官方文档
api: https://maplibre.org/maplibre-gl-js/docs/API/
examples: https://maplibre.org/maplibre-gl-js/docs/examples/
style: https://cloud.maptiler.com/auth/widget?next=https://cloud.maptiler.com/maps/
# 注意事项
1. 开发时可以先参考examples找到对应的例子 再通过api查看详细设置
2. 地图样式支持配置 需要登陆 maptilerCloud 注册对应账号 即可查看
3. 修改样式可以在 cloud 编辑对应样式 左侧页面查看 之后保存对应的json
4. 注意引用时 新增一些图层可能需要新的外部文件
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,14 @@
---
map:
path: /quill
---
富文本
# 官方地址
https://github.com/quilljs/quill
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,12 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,12 @@
---
map:
path: /quill
---
富文本
# 官方地址
https://github.com/quilljs/quill
<API src="./index.vue" lang="zh"></API>

View File

@@ -0,0 +1,13 @@
---
map:
path: /time
---
# 官方地址
https://momentjs.com/timezone/
# 注意事项
使用时建议全部转化为时间戳
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,12 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,13 @@
---
map:
path: /time
---
# 官方地址
https://momentjs.com/timezone/
# 注意事项
使用时建议全部转化为时间戳
<API src="./index.vue" lang="zh"></API>

View File

@@ -0,0 +1,13 @@
---
map:
path: /xterm
---
# 官方地址
https://xtermjs.org/
# 注意事项
api 可以在xterm.js 的 TypeScript 声明文件中找到
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,12 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,13 @@
---
map:
path: /xterm
---
# 官方地址
https://xtermjs.org/
# 注意事项
api 可以在xterm.js 的 TypeScript 声明文件中找到
<API src="./index.vue" lang="zh"></API>

View File

@@ -0,0 +1,6 @@
---
map:
path: /note
---

View File

@@ -0,0 +1,12 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,17 @@
---
map:
path: /note
---
1. 图表类型新增 需要后端增加相应的类型<br>
2. 新增颜色类型相关的样式 需要同事增加两个主题色 或者使用原有主题色 <br>
位置<br> src/assets/css/themes/theme-dark.scss <br> src/assets/css/themes/theme-light.scss<br>
3. 国际化更改后需要跟告知后端 后端需要更新相应数据库<br>
4. 图表相关的国际化 需要保存到本地 或者一直维持最新避免快照国际化错误<br>
5. 快照图标需要转化为base64才能显示对应图标。 所以iconfont 需要将相应内容转化为base64 <br>
6. 搜索框新增查询条件时 无法回显 需要查看 routerPathParams.js 以及 查看 datalist.js 的 created <br>位置<br> /src/components/common/mixin<br>
7. element-ui 的表格组件的气泡组件不建议使用 容易引起表格卡顿 建议换为一个弹窗组件 传对应的实例完成<br>
8.

View File

@@ -0,0 +1,9 @@
---
map:
path: /clickSearch
---
综合搜索组件 目前只用于 asset 以及 endpoint
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,20 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* 相关搜索参数
*/
titleSearchList?: Array<any>,
/**
* 当前选中的值
*/
selectValue?: Array<any>,
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,10 @@
---
map:
path: /clickSearch
---
综合搜索组件 目前只用于 asset 以及 endpoint
<API src="./index.vue" lang="zh"></API>

View File

@@ -0,0 +1,20 @@
---
map:
path: /promqlInput
---
promql 输入组件
# 相关链接
codemirror : https://github.com/codemirror/codemirror5
codemirror-promql : https://github.com/prometheus/codemirror-promql
# 注意事项
api文档比较少 可以查看源码看下一些其他的配置
<API src="./index.vue" lang="en"></API>

View File

@@ -0,0 +1,44 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* 当前所有已输入的表达式列表
*/
expressionList?: Array<any>,
/**
* 表示是当前输入的第几个
*/
index?: Array<any>,
/**
* 状态 查询时是否使用
*/
state?: number,
/**
* 当前显示的样式 主要两种 右侧弹窗 以及 explore的位置
*/
styleType?: number,
/**
* 历史信息查询条件
*/
historyParam?: {},
/**
* 是否显示删除
*/
showRemove?: boolean,
/**
* 是否必填
*/
required?: boolean,
/**
* 类型 metric 或者 log 为空时视为metric
*/
type?: string,
}>(), {
})
</script>
<template>
<div>
</div>
</template>

View File

@@ -0,0 +1,20 @@
---
map:
path: /promqlInput
---
promql 输入组件
# 相关链接
codemirror : https://github.com/codemirror/codemirror5
codemirror-promql : https://github.com/prometheus/codemirror-promql
# 注意事项
api文档比较少 可以查看源码看下一些其他的配置
<API src="./index.vue" lang="zh"></API>

View File

@@ -8,7 +8,7 @@ map:
1. deleteButton 删除组件
2. nzDataList table组件公共部分
3. assetBox 对应的新增 编辑染成
3. assetBox 对应的新增 编辑
4. detailViewTopSearch 详细视图搜索框
5. assetDetail 详细视图
6. assetTable 对应table组件

View File

@@ -8,7 +8,7 @@ map:
1. deleteButton 删除组件
2. nzDataList table组件公共部分
3. assetBox 对应的新增 编辑染成
3. assetBox 对应的新增 编辑
4. detailViewTopSearch 详细视图搜索框
5. assetDetail 详细视图
6. assetTable 对应table组件

View File

@@ -9,5 +9,10 @@ map:
nezha-fronted/src/components/common/searchBox/searchBoxInfo.js
# 示例代码
```vue
<search-box />
```
<API src="./index.vue" lang="en"></API>

View File

@@ -9,4 +9,9 @@ map:
nezha-fronted/src/components/common/searchBox/searchBoxInfo.js
# 示例代码
```vue
<search-box />
```
<API src="./index.vue" lang="zh"></API>

View File

@@ -9,5 +9,10 @@ map:
nezha-fronted/src/components/common/searchBox/searchBoxInfo.js
# 示例代码
```vue
<search-input />
```
<API src="./index.vue" lang="en"></API>

View File

@@ -9,4 +9,9 @@ map:
nezha-fronted/src/components/common/searchBox/searchBoxInfo.js
# 示例代码
```vue
<search-input />
```
<API src="./index.vue" lang="zh"></API>

View File

@@ -9,4 +9,9 @@ map:
父页面的blankObject 最好包含全部属性 否则可能会导致 element 部分组件不支持编辑
# 示例代码
```vue
<right-box />
```
<API src="./index.vue" lang="en"></API>

View File

@@ -9,4 +9,9 @@ map:
父页面的blankObject 最好包含全部属性 否则可能会导致 element 部分组件不支持编辑
# 示例代码
```vue
<right-box />
```
<API src="./index.vue" lang="zh"></API>