Merge branch 'dev-3.10' of git.mesalab.cn:nezha/nezha-fronted into dev-3.10

nezha-docs/docs/.vitepress/sidebar.js

@@ -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: [
+      items: []
-        {text:'dashboard 流程'},
-        {text:'主题简单使用教程'},
-        {text:'国际化使用教程'},
-      ]
     }
   ],
 };

nezha-docs/src/note/index.en-US.md

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

nezha-docs/src/other/dashboardFlow/index.en-US.md

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

nezha-docs/src/other/dashboardFlow/index.vue

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

nezha-docs/src/other/dashboardFlow/index.zh-CN.md

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

nezha-docs/src/other/i18nUse/index.en-US.md

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

nezha-docs/src/other/i18nUse/index.vue

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

nezha-docs/src/other/i18nUse/index.zh-CN.md

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

nezha-docs/src/other/themeUse/index.en-US.md

@@ -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
+}
+```

nezha-docs/src/other/themeUse/index.vue

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

nezha-docs/src/other/themeUse/index.zh-CN.md

@@ -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
+    }
+}
+```