Merge pull request #21 from hbq969/dev

fixed(调整菜单样式)

README.md

@@ -1,3 +1,5 @@
+![image-20230201113128302](README/image/README/image-20230201113128302.png)
+
 ## 说明
 
 是一个微服务的基础代码库，可用于日常快速开发，主要包含以下内容：
@@ -43,16 +45,12 @@
 
 
 
-## 依赖
+## 技术栈
 
-部署需要依赖一下环境(勾选的必须)
+- 微服务相关 `k8s`、`docker`、`SpringCloud Gateway`(网关)、`Zookeeper/ZKUI`(配置中心)
 
-+ [x] 服务注册依赖`Consul`
-+ [x] kafka、zk
-+ [x] 数据库(mysql 或 oracle)
-+ [ ] docker
-+ [ ] kubernetes
-+ [ ] redis
+- 开发框架 `SpringBoot`、`Vue3`、`Element-UI`、`webpack`、`typescript`
+- 中间件 `Kafka`、`Mysql`、`Oracle`、`redis`、`zk`
 
 
 
@@ -70,6 +68,7 @@
 
 ## 计划
 
++ [ ] 配置管理集成ZKUI的管理页面
 + [ ] 常用中间件、数据库、主机等指标采集实现
 + [ ] 网关实现灰度发布功能
 + [ ] 统一认证服务，网关统一鉴权

manage/src/main/resources/static/src/App.vue

@@ -1,34 +1,68 @@
 <template>
-  <el-menu
-      :default-active="activeIndex"
-      class="nav"
-      @select="handleSelect"
-      :router="true"
-      mode="horizontal"
-      :collapse="true"
-      :ellipsis="true"
-  >
-    <el-sub-menu index="/route">
-      <template #title>路由管理</template>
-      <el-menu-item index="/route/list">路由配置</el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index="/dict">
-      <template #title>字典管理</template>
-      <el-menu-item index="/dict/list">字典配置</el-menu-item>
-    </el-sub-menu>
-    <el-sub-menu index="/agent">
-      <template #title>指标监控</template>
-      <el-menu-item index="/agent/kafkaIn/appList">kafka入口消息流控管理</el-menu-item>
-      <el-menu-item index="/monitor/quotaList">指标列表</el-menu-item>
-    </el-sub-menu>
-  </el-menu>
-  <div class="frame">
-    <router-view/>
+  <div class="common-layout">
+    <el-container>
+      <el-header height="30px">
+        <span>HMIS微服务管理平台</span>
+        <div>
+          <el-icon>
+            <More/>
+          </el-icon>
+        </div>
+      </el-header>
+      <el-container>
+        <el-aside width="200px">
+          <el-scrollbar>
+            <el-menu
+                :default-active="activeIndex"
+                class="el-menu-vertical-demo"
+                active-text-color="#FE9200"
+                @select="handleSelect"
+                :router="true"
+            >
+              <el-sub-menu index="/route">
+                <template #title>
+                  <el-icon>
+                    <Guide/>
+                  </el-icon>
+                  路由管理
+                </template>
+                <el-menu-item index="/route/list">路由配置</el-menu-item>
+              </el-sub-menu>
+              <el-sub-menu index="/dict">
+                <template #title>
+                  <el-icon>
+                    <Grid/>
+                  </el-icon>
+                  字典管理
+                </template>
+                <el-menu-item index="/dict/list">字典配置</el-menu-item>
+              </el-sub-menu>
+              <el-sub-menu index="/agent">
+                <template #title>
+                  <el-icon>
+                    <PieChart/>
+                  </el-icon>
+                  指标监控
+                </template>
+                <el-menu-item index="/agent/kafkaIn/appList">流控管理</el-menu-item>
+                <el-menu-item index="/monitor/quotaList">指标列表</el-menu-item>
+              </el-sub-menu>
+            </el-menu>
+          </el-scrollbar>
+        </el-aside>
+        <el-main>
+          <div class="frame">
+            <router-view/>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
 
 <script lang="ts" setup>
   import {ref} from 'vue'
+  import {Guide, Grid, PieChart, Menu, More, SwitchButton} from '@element-plus/icons-vue'
 
   const activeIndex = ref('/route')
 
@@ -39,6 +73,63 @@
 
 <style lang="scss">
   .frame {
-    padding: 20px 5px 10px 5px;
+    padding: 5px 5px 10px 5px;
+  }
+
+  .el-menu-vertical-demo:not(.el-menu--collapse) {
+    /*margin-top: 10px;*/
+    width: 200px;
+    min-height: 600px;
+  }
+
+  .el-header {
+    --el-header-padding: 0 5px;
+    /*--el-header-height: 60px;*/
+    /*padding: var(--el-header-padding);*/
+    /*box-sizing: border-box;*/
+    /*flex-shrink: 0;*/
+    /*height: var(--el-header-height);*/
+  }
+
+  .home_container {
+    height: 50em;
+  }
+
+  .el-header {
+    background-color: #364040;
+    // 给头部设置一下弹性布局
+    display: flex;
+    // 让它贴标左右对齐
+    justify-content: space-between;
+    // 清空图片左侧padding
+    padding-left: 0;
+    // 按钮居中
+    align-items: center;
+    // 文本颜色
+    color: #fff;
+    // 设置文本字体大小
+    font-size: 20px;
+    // 嵌套
+    > div {
+      // 弹性布局
+      display: flex;
+      // 纵向上居中对齐
+      align-items: center;
+      margin-right: 10px;
+      // 给文本和图片添加间距，使用类选择器
+      span {
+        margin-left: 15px;
+      }
+    }
+
+  }
+
+  .el-aside {
+    margin-top: 15px;
+  }
+
+  .el-main {
+    background-color: #f6f8fa;
+    --el-main-padding: 10px;
   }
 </style>

manage/src/main/resources/static/ui/index.html

@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>维护管理</title><script defer="defer" src="js/chunk-vendors.dbd5ceb9.js"></script><script defer="defer" src="js/app.34291acf.js"></script><link href="css/chunk-vendors.652ef09d.css" rel="stylesheet"><link href="css/app.37ffa179.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but static doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>维护管理</title><script defer="defer" src="js/chunk-vendors.6b42a685.js"></script><script defer="defer" src="js/app.e569c621.js"></script><link href="css/chunk-vendors.652ef09d.css" rel="stylesheet"><link href="css/app.e3b8e811.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but static doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>