gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 添加 table文档（30%）

Browse Source
This commit is contained in:
zhangyu
2024-05-24 18:27:29 +08:00
parent 1569281632
commit d95cde5875
12 changed files with 360 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
nezha-docs/docs/.vitepress/sidebar.js
View File

@@ -40,6 +40,14 @@ export const sidebar = {
}, },
] ]
}, },
{
text: 'table',
link: '/table',
items: [
{ text: 'deleteButton', link: '/deleteButton',},
{ text: 'nzDataList', link: '/nzDataList',},
]
}
], ],
} }
], ],

1
nezha-docs/src/chartList/chartList.vue
View File

@@ -61,5 +61,6 @@ const props = withDefaults(defineProps<{
<template> <template>
<div> <div>
</div> </div>
</template> </template>

9
nezha-docs/src/table/demo.vue Normal file
View File

@@ -0,0 +1,9 @@
<script lang="ts" setup>
</script>
<template>
<div></div>
</template>
<style>
</style>

58
nezha-docs/src/table/index.en-US.md Normal file
View File

@@ -0,0 +1,58 @@
---
map:
path: /table
---
# 关联组件
以asset为例子 其他表格 将asset换为对应名称
1. deleteButton 删除组件
2. nzDataList table组件公共部分
3. assetBox 对应的新增 编辑染成
4. detailViewTopSearch 详细视图搜索框
5. assetDetail 详细视图
6. assetTable 对应table组件
7. clickSearch 详细搜索框
8. topToolMoreOptions 右侧工具菜单
9. alertSilenceBox 告警静默弹窗
10. nzDetailView 详细视图 公共部分
# 示例
```vue
<div>
<nz-detail-view>
<template v-slot:top-tool-left>
<detailViewTopSearch />
</template>
<template v-slot:top-tool-right>
<top-tool-more-options></top-tool-more-options>
</template>
<template v-slot:nz-detail-view-list>
<asset-detail></asset-detail>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<el-pagination></el-pagination>
</template>
</nz-detail-view>
<nz-data-list>
<template v-slot:top-tool-right>
<top-tool-more-options></top-tool-more-options>
</template>
<template v-slot:search >
<click-search />
</template>
<template v-slot:default="slotProps">
<asset-table></asset-table>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-data-list>
<transition name="right-box">
<asset-box />
</transition>
</div>
```

39
nezha-docs/src/table/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* chart相关信息 如id 位置等
*/
chartInfo?: string,
/**
* 是否报错
*/
isError?: boolean,
/**
* chart相关数据 若报错 取 item.error
*/
chartData?: { },
/**
* 是否显示全部数据
*/
showAllData?: boolean,
/**
* 全部数据的长度
*/
allDataLength?: number,
/**
* 是否为快照
*/
isExportHtml?: boolean,
/**
* 是否为预览
*/
isPreview?: boolean,
}>(), {
})
</script>
<template>
<div>
</div>
</template>

59
nezha-docs/src/table/index.zh-CN.md Normal file
View File

@@ -0,0 +1,59 @@
---
map:
path: /table
---
# 关联组件
以asset为例子 其他表格 将asset换为对应名称
1. deleteButton 删除组件
2. nzDataList table组件公共部分
3. assetBox 对应的新增 编辑染成
4. detailViewTopSearch 详细视图搜索框
5. assetDetail 详细视图
6. assetTable 对应table组件
7. clickSearch 详细搜索框
8. topToolMoreOptions 右侧工具菜单
9. alertSilenceBox 告警静默弹窗
10. nzDetailView 详细视图 公共部分
# 示例
```vue
<div>
<nz-detail-view>
<template v-slot:top-tool-left>
<detailViewTopSearch />
</template>
<template v-slot:top-tool-right>
<top-tool-more-options></top-tool-more-options>
</template>
<template v-slot:nz-detail-view-list>
<asset-detail></asset-detail>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<el-pagination></el-pagination>
</template>
</nz-detail-view>
<nz-data-list>
<template v-slot:top-tool-right>
<top-tool-more-options></top-tool-more-options>
</template>
<template v-slot:search >
<click-search />
<click-search />
</template>
<template v-slot:default="slotProps">
<asset-table></asset-table>
</template>
<!-- 分页组件 -->
<template v-slot:pagination>
<Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
</template>
</nz-data-list>
<transition name="right-box">
<asset-box />
</transition>
</div>
```

7
nezha-docs/src/table/tableChild/deleteButton/index.en-US.md Normal file
View File

@@ -0,0 +1,7 @@
---
map:
path: /deleteButton
---
<API src="./index.vue" lang="en"></API>

39
nezha-docs/src/table/tableChild/deleteButton/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* 是否显示强制删除
*/
forceDeleteShow?: boolean,
/**
* 需要删除的数组
*/
deleteObjs?: Array,
/**
* 删除接口
*/
api?: string,
/**
* 唯一id
*/
id?: string,
/**
* 删除按钮的样式 是按钮 还是文字
*/
type?: string,
/**
* 删除的标题
*/
deleteTitle?: string,
/**
* 是否需要强制删除
*/
single?: boolean,
}>(), {
})
</script>
<template>
<div>
</div>
</template>

8
nezha-docs/src/table/tableChild/deleteButton/index.zh-CN.md Normal file
View File

@@ -0,0 +1,8 @@
---
map:
path: /deleteButton
---
<API src="./index.vue" lang="zh"></API>

7
nezha-docs/src/table/tableChild/nzDataList/index.en-US.md Normal file
View File

@@ -0,0 +1,7 @@
---
map:
path: /nzDataList
---
<API src="./index.vue" lang="en"></API>

41
nezha-docs/src/table/tableChild/nzDataList/index.vue Normal file
View File

@@ -0,0 +1,41 @@
<script lang="ts" setup>
const props = withDefaults(defineProps<{
/**
* 是否显示强制删除
*/
forceDeleteShow?: boolean,
/**
* 需要删除的数组
*/
deleteObjs?: Array,
/**
* 删除接口
*/
api?: string,
/**
* 唯一id
*/
id?: string,
/**
* 删除按钮的样式 是按钮 还是文字
*/
type?: string,
/**
* 删除的标题
*/
deleteTitle?: string,
/**
* 是否需要强制删除
*/
single?: boolean,
}>(), {
})
</script>
<template>
<div>
<!-- 这里是默认插槽，可以插入自定义内容 -->
<slot name="top-tool-left">{{ 213123 }}</slot>
</div>
</template>

84
nezha-docs/src/table/tableChild/nzDataList/index.zh-CN.md Normal file
View File

@@ -0,0 +1,84 @@
---
map:
path: /nzDataList
---
# 关联组件
1. SearchBox
2. bottomBox
3. panelChart
4. deleteButton
5. diagnosisTab
6. configSync
# 示例代码
```vue
<div :class="from" class="list-page">
<!-- 主页面 -->
<div class="main-list">
<!-- 顶部工具栏 -->
<div class="main-container">
<div class="top-tools">
<div class="top-tool-left" >
<search-box></search-box>
<slot name="top-tool-left"></slot>
</div>
<div class="top-tool-right">
<div>
<search-input ></search-input>
</div>
<template>
<slot name="top-tool-right"></slot>
</template>
<button v-if="showLayout.indexOf('elementSet') > -1" class="top-tool-btn table-column-setting"
type="button" @click="tools.showCustomTableTitle = true" :title="$t('overall.selectColumns')">
<i class="nz-icon-gear nz-icon"></i>
</button>
<el-dropdown>
<button class="top-tool-btn table-column-setting"
type="button" :title="$t('overall.switchView')">
<i class="nz-icon nz-icon-list-view" />
</button>
<el-dropdown-menu slot="dropdown" class="right-public-box-dropdown-top right-box-select-top">
<el-dropdown-item :command="'list'" :class="detailType === 'list' ? 'active' : ''">{{$t('asset.detail.list')}}</el-dropdown-item>
<el-dropdown-item :command="'view'" :class="detailType === 'view' ? 'active' : ''">{{$t('asset.detail.detail')}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<!-- 顶部分页组件，当打开底部上滑框时出现 -->
<!-- <div v-if="showLayout.indexOf('pagination') > -1" class="pagination-top pagination-top-hide display-none"></div>-->
</div>
<div >
<slot name="search"></slot>
</div>
<div>
<slot v-bind:mainResizeShow="bottomBox.mainResizeShow"></slot>
</div>
<div>
<slot name="pagination"></slot>
</div>
</div>
<!-- 自定义table列 -->
<transition name="el-zoom-in-top">
<element-set></element-set>
</transition>
</div>
<transition name="el-zoom-in-bottom">
<bottom-box ></bottom-box>
</transition>
<delete-button></delete-button>
<diagnosis-tab></diagnosis-tab>
<config-sync></config-sync>
</div>
```
<API src="./index.vue" lang="zh"></API>