fix: 文档补充

This commit is contained in:
zhangyu
2024-05-28 17:57:44 +08:00
parent 63c3c029d3
commit 825a0ae95a
14 changed files with 319 additions and 2229 deletions

View File

@@ -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: []
}
],
};

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

View File

@@ -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.

View File

@@ -0,0 +1,11 @@
---
map:
path: /dashboardFlow
---
1. dashboard 简单加载流程
<img src='/dashboard.jpg' /> <br>
2. dashboard 滚动加载<br>
根据当前组件所在高度 是否小于 当前页面宽加滚动距离判断 <br>
group 内为 当前组高度 加 组件在group内的位置判断是否加载 <br>

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,11 @@
---
map:
path: /dashboardFlow
---
1. dashboard 简单加载流程
<img src='/dashboard.jpg' /> <br>
2. dashboard 滚动加载<br>
根据当前组件所在高度 是否小于 当前页面宽加滚动距离判断 <br>
group 内为 当前组高度 加 组件在group内的位置判断是否加载 <br>

View 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>

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,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>

View 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
}
```

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,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
}
}
```