fix: 文档补充
This commit is contained in:
@@ -14,6 +14,14 @@ export const sidebar = {
|
||||
{ text: '简介', link: '/' },
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '前端部分功能介绍',
|
||||
items: [
|
||||
{text:'dashboard 流程', link: '/dashboardFlow'},
|
||||
{text:'主题简单使用教程', link: '/themeUse'},
|
||||
{text:'国际化使用教程', link: '/i18nUse'},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '组件',
|
||||
items: [
|
||||
@@ -91,11 +99,7 @@ export const sidebar = {
|
||||
{
|
||||
text: '注意事项',
|
||||
link: '/note',
|
||||
items: [
|
||||
{text:'dashboard 流程'},
|
||||
{text:'主题简单使用教程'},
|
||||
{text:'国际化使用教程'},
|
||||
]
|
||||
items: []
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
BIN
nezha-docs/docs/public/dashboard.jpg
Normal file
BIN
nezha-docs/docs/public/dashboard.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -3,4 +3,15 @@ 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.
|
||||
|
||||
|
||||
|
||||
|
||||
11
nezha-docs/src/other/dashboardFlow/index.en-US.md
Normal file
11
nezha-docs/src/other/dashboardFlow/index.en-US.md
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
map:
|
||||
path: /dashboardFlow
|
||||
---
|
||||
|
||||
|
||||
1. dashboard 简单加载流程
|
||||
<img src='/dashboard.jpg' /> <br>
|
||||
2. dashboard 滚动加载<br>
|
||||
根据当前组件所在高度 是否小于 当前页面宽加滚动距离判断 <br>
|
||||
group 内为 当前组高度 加 组件在group内的位置判断是否加载 <br>
|
||||
20
nezha-docs/src/other/dashboardFlow/index.vue
Normal file
20
nezha-docs/src/other/dashboardFlow/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* 相关搜索参数
|
||||
*/
|
||||
titleSearchList?: Array<any>,
|
||||
/**
|
||||
* 当前选中的值
|
||||
*/
|
||||
selectValue?: Array<any>,
|
||||
|
||||
}>(), {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
11
nezha-docs/src/other/dashboardFlow/index.zh-CN.md
Normal file
11
nezha-docs/src/other/dashboardFlow/index.zh-CN.md
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
map:
|
||||
path: /dashboardFlow
|
||||
---
|
||||
|
||||
|
||||
1. dashboard 简单加载流程
|
||||
<img src='/dashboard.jpg' /> <br>
|
||||
2. dashboard 滚动加载<br>
|
||||
根据当前组件所在高度 是否小于 当前页面宽加滚动距离判断 <br>
|
||||
group 内为 当前组高度 加 组件在group内的位置判断是否加载 <br>
|
||||
11
nezha-docs/src/other/i18nUse/index.en-US.md
Normal file
11
nezha-docs/src/other/i18nUse/index.en-US.md
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
map:
|
||||
path: /i18nUse
|
||||
---
|
||||
使用 直接 $t(code) 即可 <br>
|
||||
先访问地址 <br>
|
||||
http://192.168.44.22/ui/i18n?orderBy=id&pageNo=1&pageSize=20&detailType=list<br>
|
||||
查看是否有自己需要添加的i18n <br>
|
||||
若有直接使用对应code <br>
|
||||
若没有点击新增 要新增两种语言的 然后使用对应code <br>
|
||||
|
||||
20
nezha-docs/src/other/i18nUse/index.vue
Normal file
20
nezha-docs/src/other/i18nUse/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* 相关搜索参数
|
||||
*/
|
||||
titleSearchList?: Array<any>,
|
||||
/**
|
||||
* 当前选中的值
|
||||
*/
|
||||
selectValue?: Array<any>,
|
||||
|
||||
}>(), {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
11
nezha-docs/src/other/i18nUse/index.zh-CN.md
Normal file
11
nezha-docs/src/other/i18nUse/index.zh-CN.md
Normal file
@@ -0,0 +1,11 @@
|
||||
---
|
||||
map:
|
||||
path: /i18nUse
|
||||
---
|
||||
使用 直接 $t(code) 即可 <br>
|
||||
先访问地址 <br>
|
||||
http://192.168.44.22/ui/i18n?orderBy=id&pageNo=1&pageSize=20&detailType=list<br>
|
||||
查看是否有自己需要添加的i18n <br>
|
||||
若有直接使用对应code <br>
|
||||
若没有点击新增 要新增两种语言的 然后使用对应code <br>
|
||||
|
||||
26
nezha-docs/src/other/themeUse/index.en-US.md
Normal file
26
nezha-docs/src/other/themeUse/index.en-US.md
Normal file
@@ -0,0 +1,26 @@
|
||||
---
|
||||
map:
|
||||
path: /themeUse
|
||||
---
|
||||
|
||||
# 介绍
|
||||
主题核心其实就是 颜色的改变 <br>
|
||||
|
||||
目前前端主题实现的基本原理就是 css变量,在不同class名称下 配置不同的css变量 <br>
|
||||
|
||||
# 位置<br>
|
||||
黑色 对应class .theme-dark 对应变量文件为 src/assets/css/themes/theme-dark.scss <br>
|
||||
白色 对应class .theme-light 对应变量文件为 src/assets/css/themes/theme-light.scss<br>
|
||||
主题切换是 将class名替换为对应即可<br>
|
||||
注意 黑色和白色主题的变量名 需要一一对应
|
||||
|
||||
# 使用
|
||||
当你想使用颜色属性时 需要到对应位置搜索对应颜色 或者根据备注使用相应的颜色<br>
|
||||
例 :
|
||||
```
|
||||
黑色 $--color-font: #FFFFFF
|
||||
白色 $--color-font: #000000
|
||||
.font{
|
||||
color: $--color-font
|
||||
}
|
||||
```
|
||||
20
nezha-docs/src/other/themeUse/index.vue
Normal file
20
nezha-docs/src/other/themeUse/index.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
/**
|
||||
* 相关搜索参数
|
||||
*/
|
||||
titleSearchList?: Array<any>,
|
||||
/**
|
||||
* 当前选中的值
|
||||
*/
|
||||
selectValue?: Array<any>,
|
||||
|
||||
}>(), {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
</div>
|
||||
</template>
|
||||
43
nezha-docs/src/other/themeUse/index.zh-CN.md
Normal file
43
nezha-docs/src/other/themeUse/index.zh-CN.md
Normal file
@@ -0,0 +1,43 @@
|
||||
---
|
||||
map:
|
||||
path: /themeUse
|
||||
---
|
||||
|
||||
# 介绍
|
||||
主题核心其实就是 颜色的改变 <br>
|
||||
|
||||
目前前端主题实现的基本原理就是 css变量,在不同class名称下 配置不同的css变量 <br>
|
||||
|
||||
# 位置<br>
|
||||
黑色 对应class .theme-dark 对应变量文件为 src/assets/css/themes/theme-dark.scss <br>
|
||||
白色 对应class .theme-light 对应变量文件为 src/assets/css/themes/theme-light.scss<br>
|
||||
主题切换是 将class名替换为对应即可<br>
|
||||
注意 黑色和白色主题的变量名 需要一一对应
|
||||
|
||||
# 使用
|
||||
当你想使用颜色属性时 需要到对应位置搜索对应颜色 或者根据备注使用相应的颜色<br>
|
||||
例 :
|
||||
```
|
||||
黑色 $--color-font: #FFFFFF
|
||||
白色 $--color-font: #000000
|
||||
.font{
|
||||
color: $--color-font
|
||||
}
|
||||
|
||||
经过编译之后会变为 两套css
|
||||
|
||||
.theme-dark {
|
||||
$--color-font: #FFFFFF
|
||||
.font{
|
||||
color: $--color-font
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.theme-light {
|
||||
$--color-font: #000000
|
||||
.font{
|
||||
color: $--color-font
|
||||
}
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user