优化系统布局

src/assets/styles/element-ui.scss

@@ -1,16 +1,5 @@
 // cover some element-ui styles
 
-.el-breadcrumb__inner,
-.el-breadcrumb__inner a {
-  font-weight: 400 !important;
-}
-
-// .el-upload {
-//   input[type="file"] {
-//     display: none !important;
-//   }
-// }
-
 .el-upload__input {
   display: none;
 }
@@ -21,11 +10,11 @@
   }
 }
 
-.small-padding {
+// table 里面操作按钮样式覆盖
-  .cell {
+.el-table__cell .cell {
-    padding-left: 5px;
+	.el-button.is-text{
-    padding-right: 5px;
+		padding: 8px 5px;
-  }
+	}
 }
 
 .status-col {
@@ -50,7 +39,7 @@
 
 .el-header {
   --el-header-padding: 0 0px !important;
-  --el-header-height: 50px !important;
+  // --el-header-height: 50px !important;
 }
 // el 2.2.0 text button
 .el-button.is-text {

src/assets/styles/index.scss

@@ -5,7 +5,7 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './waves.scss';
-@import './black.scss';
+// @import './black.scss';
 
 html,
 body,

src/assets/styles/sidebar.scss

@@ -1,7 +1,7 @@
 #app {
   .layout-sidebar__container {
     transition: width 0.28s ease;
-    background-color: var(--base-menu-background);
+    // background-color: var(--base-menu-background);
     height: 100%;
     position: relative;
     font-size: 0px;
@@ -78,7 +78,8 @@
 
     .layout-sidebar__container {
       transition: transform 0.28s;
-			position: fixed;
+      position: fixed;
+      background: var(--base-menu-background, #fff);
     }
 
     &.hideSidebar {

src/assets/styles/variables.module.scss

@@ -10,31 +10,47 @@ $panGreen: #30b08f;
 
 // 默认菜单主题风格
 :root {
-  --base-menu-background: #ffffff;
+  // --base-menu-background: #ffffff;
-  --base-logo-title-color: #ffffff;
+  // --base-logo-title-color: #ffffff;
-  --base-topBar-background: #ffffff;
+  // --base-topBar-background: #ffffff;
-  --base-topBar-color: #5a5e66;
+  // --base-topBar-color: #5a5e66;
-  --base-sidebar-width: 220px;
-  --base-sidebar-left: 64px;
 
+  --base-text-color-rgba: rgba(0, 0, 0, 0.85);
+  --base-sidebar-width: 220px;
   --el-aside-width: 220px;
+  --el-header-height: 50px;
+  --base-footer-height: 40px;
+  --base-tags-height: 34px;
 }
 /***默认主题颜色配置***/
 [data-theme='theme-light'] {
   // 菜单背景
-  --base-menu-background: #ffffff;
+  // --base-menu-background: #ffffff;
-  // logo部分文字颜色
+  // // logo部分文字颜色
-  --base-logo-title-color: #001529;
+  // --base-logo-title-color: #001529;
-  // 顶部导航栏背景色
+  // // 顶部导航栏背景色
-  --base-topBar-background: #ffffff;
+  // --base-topBar-background: #ffffff;
 }
 /***深色主题颜色配置***/
 [data-theme='theme-dark'] {
-  --base-menu-background: #304156;
+  // --base-menu-background: #304156;
-  --base-logo-title-color: #ffffff;
+  // --base-logo-title-color: #ffffff;
-  --base-topBar-background: #ffffff;
+  // --base-topBar-background: #ffffff;
 
-  // el-ement ui 设置
+  // // el-ement ui 设置
-  --el-fill-color-blank: #304156;
+  // --el-fill-color-blank: #304156;
-  --el-text-color-primary: #bfcbd9;
+  // --el-text-color-primary: #bfcbd9;
+}
+html.dark {
+  /* custom dark bg color */
+  // --el-bg-color: #626aef;
+  --base-color-white: #ffffff;
+  --base-text-color-rgba: #fff;
+  --base-menu-background: var(--el-bg-color);
+}
+html.cafe {
+  filter: sepia(0.9) hue-rotate(315deg) brightness(0.9);
+}
+html.contrast {
+  filter: contrast(2);
 }

src/components/Echarts/Gauge.vue

@@ -1,99 +1,90 @@
 <template>
-  <div :class="className" :style="{height:height,width:width}" />
+  <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
 </template>
 
-<script>
+<script setup>
-import * as echarts from "echarts";
+import * as echarts from 'echarts'
 
 // import("echarts/theme/macarons"); // echarts theme
-import { debounce } from "@/utils";
+// import { debounce } from '@/utils'
+import { useDebounceFn } from '@vueuse/core'
 
-export default {
+const { proxy } = getCurrentInstance()
-  props: {
-    name: {
-      type: String,
-      default: "业务指标",
-    },
-    min: {
-      type: [Object, Number],
-      default: 0,
-    },
-    max: {
-      type: [Object, Number],
-      default: 0,
-    },
-    data: {
-      type: Array,
-      default: () => [
-        {
-          value: "",
-          name: "占比",
-        },
-      ],
-    },
-    className: {
-      type: String,
-      default: "chart",
-    },
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "300px",
-    },
-  },
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  mounted() {
-    this.initChart();
-    this.__resizeHandler = debounce(() => {
-      if (this.chart) {
-        this.chart.resize();
-      }
-    }, 100);
-    window.addEventListener("resize", this.__resizeHandler);
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    window.removeEventListener("resize", this.__resizeHandler);
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, "macarons");
 
-      this.chart.setOption({
+const props = defineProps({
-        tooltip: {
+  name: {
-          formatter: "{a} <br/>{b} : {c}",
+    type: String,
-        },
+    default: '',
-        // toolbox: {
-        //   feature: {
-        //     restore: {},
-        //     saveAsImage: {},
-        //   },
-        // },
-        series: [
-          {
-            name: this.name,
-            type: "gauge",
-            min: this.min,
-            max: this.max,
-            detail: {
-              formatter: "{value}%",
-            },
-            data: this.data,
-          },
-        ],
-      });
-    },
   },
-};
+  min: {
+    type: [Object, Number],
+    default: 0,
+  },
+  max: {
+    type: [Object, Number],
+    default: 0,
+  },
+  data: {
+    type: Array,
+    default: () => [
+      {
+        value: '',
+        name: '占比',
+      },
+    ],
+  },
+  className: {
+    type: String,
+    default: 'chart',
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  height: {
+    type: String,
+    default: '300px',
+  },
+})
+let chart = null
+const chartRef = ref()
+
+//重绘图表函数
+const resizeHandler = () => {
+  chart.resize()
+}
+function initChart() {
+  chart = echarts.init(proxy.$refs.chartRef, 'macarons')
+
+  chart.setOption({
+    tooltip: {
+      formatter: '{a} <br/>{b} : {c}',
+    },
+    series: [
+      {
+        name: props.name,
+        type: 'gauge',
+        min: props.min,
+        max: props.max,
+        detail: {
+          formatter: '{value}%',
+        },
+        data: props.data,
+      },
+    ],
+  })
+}
+const debouncedFn = useDebounceFn(() => {
+  // do something
+	resizeHandler()
+}, 500)
+
+document.addEventListener('resize', debouncedFn)
+
+onMounted(() => {
+  initChart()
+})
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', debouncedFn)
+})
 </script>

src/i18n/lang/en.js

@@ -66,7 +66,8 @@ export default {
     fixed: 'fixed',
     show: 'show',
     dynamicTitle: 'dynamic title',
-    darkMode: 'dark mode',
+    darkMode: 'dark',
+    lightMode: 'light',
     saveConfig: 'save',
     resetConfig: 'reset',
     logOutConfirm: 'Are you sure you want to exit the current login?',

src/i18n/lang/zh-cn.js

@@ -66,7 +66,8 @@ export default {
     fixed: '固定',
     show: '显示',
     dynamicTitle: '动态标题',
-    darkMode: '深色模式',
+    darkMode: '深色',
+    lightMode: '明亮',
     saveConfig: '保存配置',
     resetConfig: '重置配置',
     logOutConfirm: '你確定要退出当前登录吗？',

src/i18n/lang/zh-tw.js

@@ -66,7 +66,8 @@ export default {
     fixed: '固定',
     show: '顯示',
     dynamicTitle: '動態標題',
-    darkMode: '深色模式',
+    darkMode: '深色',
+    lightMode: '明亮',
     saveConfig: '保存配置',
     resetConfig: '重置配置',
     logOutConfirm: '你確定要退出当前登录吗？',

src/layout/components/Navbar.vue

@@ -94,14 +94,15 @@ function setLayout() {
 </script>
 
 <style lang="scss" scoped>
-// .el-menu {
+.el-menu {
-//   // display: inline-table;
+  // display: inline-table;
-//   .el-menu-item {
+	border-bottom: none;
-//     vertical-align: center;
+  .el-menu-item {
-//   }
+    vertical-align: center;
-// }
+  }
+}
 .navbar {
-  height: 50px;
+  // height: 50px;
   overflow: hidden;
   position: relative;
   background: var(--base-topBar-background);
@@ -135,7 +136,7 @@ function setLayout() {
 
   .right-menu {
     height: 100%;
-    line-height: 50px;
+    line-height: 60px;
     display: flex;
     justify-content: flex-end;
     align-items: center;

src/layout/components/Settings/index.vue

@@ -4,7 +4,7 @@
       <h3 class="drawer-title">{{ $t('layout.themeStyleSet') }}</h3>
     </div>
     <div class="setting-drawer-block-checbox">
-      <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
+      <!-- <div class="setting-drawer-block-checbox-item" @click="handleTheme('theme-dark')">
         <img src="@/assets/images/dark.svg" alt="dark" />
         <div v-if="sideTheme === 'theme-dark'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <el-icon><Check /></el-icon>
@@ -15,15 +15,22 @@
         <div v-if="sideTheme === 'theme-light'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
           <el-icon><Check /></el-icon>
         </div>
-      </div>
+      </div>-->
-      <div class="setting-drawer-block-checkbox-item drawer-title" @click="handleTheme('theme-black')">
-        <div v-if="sideTheme === 'theme-black'" class="setting-drawer-block-checbox-selectIcon" style="display: block">
-          <el-icon><Check /></el-icon>
-        </div>
-        <el-icon><moon /></el-icon>
-        {{ $t('layout.darkMode') }}
-      </div>
     </div>
+    <div class="drawer-item">
+      <el-radio-group v-model="mode" size="small">
+        <el-radio label="dark">{{$t('layout.darkMode')}}</el-radio>
+        <el-radio label="light">{{$t('layout.lightMode')}}</el-radio>
+        <el-radio label="cafe">cafe</el-radio>
+        <!-- <el-radio label="contrast">contrast</el-radio> -->
+      </el-radio-group>
+    </div>
+    <!-- <div class="drawer-item">
+      <span>暗黑模式</span>
+      <span class="comp-style">
+        <el-switch v-model="isDark" class="mt-2" inline-prompt />
+      </span>
+    </div> -->
     <div class="drawer-item">
       <span>{{ $t('layout.themeColor') }}</span>
       <span class="comp-style">
@@ -76,9 +83,9 @@
 </template>
 
 <script setup>
-import variables from '@/assets/styles/variables.module.scss'
+import 'element-plus/theme-chalk/index.css'
-import originElementPlus from 'element-plus/theme-chalk/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
-
+import { useDark, useCycleList, useColorMode } from '@vueuse/core'
 import { useDynamicTitle } from '@/utils/dynamicTitle'
 import { getLightColor } from '@/utils/index'
 
@@ -90,7 +97,16 @@ const sideTheme = ref(store.state.settings.sideTheme)
 const storeSettings = computed(() => store.state.settings)
 const predefineColors = ref(['#409EFF', '#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1', '#1e90ff', '#c71585'])
 
-const blackTheme = ref(false)
+// 可以手动更改当前值 model.value = 'cafe'
+const mode = useColorMode({
+  modes: {
+    // custom colors
+    contrast: 'dark contrast',
+    cafe: 'cafe',
+  },
+})
+const { next } = useCycleList(['dark', 'light', 'cafe', 'contrast'], { initialValue: mode })
+const isDark = useDark()
 
 /** 是否需要topnav */
 const topNav = computed({
@@ -161,10 +177,12 @@ watch(
 watch(
   () => sideTheme,
   (val) => {
-    console.log(val.value)
     const body = document.documentElement
-    if (val.value == 'theme-black') body.setAttribute('data-theme', 'theme-black')
+    if (val.value == 'theme-black') {
-    else body.setAttribute('data-theme', '')
+      //body.setAttribute('data-theme', 'theme-black')
+    } else {
+      //body.setAttribute('data-theme', '')
+    }
   },
   {
     immediate: true,
@@ -196,8 +214,6 @@ function handleTheme(val) {
   const body = document.documentElement
   if (val == 'theme-black') body.setAttribute('data-theme', 'theme-black')
   else body.setAttribute('data-theme', '')
-  console.log('change ' + val)
-  blackTheme.value = val === 'theme-black'
 }
 function saveSetting() {
   proxy.$modal.loading('正在保存到本地，请稍候...')
@@ -211,7 +227,7 @@ function saveSetting() {
     theme: storeSettings.value.theme,
   }
   localStorage.setItem('layout-setting', JSON.stringify(layoutSetting))
-  setTimeout(proxy.$modal.closeLoading(), 1000)
+  setTimeout(proxy.$modal.closeLoading(), 500)
 }
 function resetSetting() {
   proxy.$modal.loading('正在清除设置缓存并刷新，请稍候...')
@@ -230,7 +246,7 @@ defineExpose({
 <style lang="scss" scoped>
 .setting-drawer-title {
   margin-bottom: 12px;
-  color: rgba(0, 0, 0, 0.85);
+  color: var(--base-text-color-rgba);
   line-height: 22px;
   font-weight: bold;
   .drawer-title {
@@ -244,7 +260,7 @@ defineExpose({
   margin-top: 10px;
   margin-bottom: 20px;
 
-  .setting-drawer-block-checbox-item {
+  .item {
     position: relative;
     margin-right: 16px;
     border-radius: 2px;
@@ -278,7 +294,7 @@ defineExpose({
 }
 
 .drawer-item {
-  color: rgba(0, 0, 0, 0.65);
+  color: var(--base-text-color-rgba);
   padding: 12px 0;
   font-size: 14px;
 

src/layout/components/Sidebar/Logo.vue

@@ -14,7 +14,6 @@
 </template>
 
 <script setup>
-import variables from '@/assets/styles/variables.module.scss'
 import logo from '@/assets/logo/logo.png'
 
 defineProps({

src/layout/components/Sidebar/index.vue

@@ -20,7 +20,6 @@
 <script setup>
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
-import variables from '@/assets/styles/variables.module.scss'
 
 const route = useRoute()
 const store = useStore()
@@ -40,7 +39,3 @@ const activeMenu = computed(() => {
   return path
 })
 </script>
-
-<style lang="scss">
-@import '@/assets/styles/variables.module.scss';
-</style>

src/layout/components/TagsView/index.vue

@@ -10,8 +10,7 @@
         class="tags-view-item"
         :style="activeStyle(tag)"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
-        @contextmenu.prevent="openMenu(tag, $event)"
+        @contextmenu.prevent="openMenu(tag, $event)">
-      >
         <span v-if="tag.meta && tag.meta.titleKey">{{ $t(tag.meta.titleKey) }}</span>
         <span v-else>{{ tag.title }}</span>
         <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
@@ -21,7 +20,9 @@
     </scroll-pane>
     <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)"><refresh-right style="width: 1em; height: 1em" /> {{ $t('tagsView.refresh') }}</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)"><close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}</li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <close style="width: 1em; height: 1em" /> {{ $t('tagsView.close') }}
+      </li>
       <li @click="closeOthersTags"><circle-close style="width: 1em; height: 1em" /> {{ $t('tagsView.closeOther') }}</li>
       <li v-if="!isFirstView()" @click="closeLeftTags"><back style="width: 1em; height: 1em" /> {{ $t('tagsView.closeLeft') }}</li>
       <li v-if="!isLastView()" @click="closeRightTags"><right style="width: 1em; height: 1em" /> {{ $t('tagsView.closeRight') }}</li>
@@ -237,7 +238,7 @@ function handleScroll() {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #ccc;
+      // border: 1px solid #ccc;
       color: var(--el-text-color-regular);
       padding: 0 8px;
       font-size: 12px;
@@ -249,6 +250,10 @@ function handleScroll() {
       &:last-of-type {
         margin-right: 15px;
       }
+      &:hover {
+        background-color: var(--el-color-primary);
+        color: #fff;
+      }
       &.active {
         background-color: var(--el-color-primary);
         border-color: var(--el-color-primary);

src/layout/index.vue

@@ -17,6 +17,9 @@
           </transition>
         </router-view>
       </el-main>
+      <el-footer>
+        <div v-html="defaultSettings.copyright"></div>
+      </el-footer>
       <settings ref="settingRef" />
     </el-container>
   </el-container>
@@ -53,18 +56,18 @@ const WIDTH = 992 // refer to Bootstrap's responsive design
 
 watchEffect(() => {
   if (device.value === 'mobile' && sidebar.value.opened) {
-    store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    store.dispatch('app/closeSideBar')
   }
   if (width.value - 1 < WIDTH) {
     store.dispatch('app/toggleDevice', 'mobile')
-    store.dispatch('app/closeSideBar', { withoutAnimation: true })
+    store.dispatch('app/closeSideBar')
   } else {
     store.dispatch('app/toggleDevice', 'desktop')
   }
 })
 
 function handleClickOutside() {
-  store.dispatch('app/closeSideBar', { withoutAnimation: false })
+  store.dispatch('app/closeSideBar')
 }
 
 const settingRef = ref(null)
@@ -75,7 +78,6 @@ function setLayout() {
 
 <style lang="scss">
 @import '@/assets/styles/mixin.scss';
-@import '@/assets/styles/variables.module.scss';
 
 .main-container {
   min-height: 100%;
@@ -127,16 +129,20 @@ function setLayout() {
 
 .el-header {
   --el-header-padding: 0 0px !important;
-  --el-header-height: 50px !important;
+  // --el-header-height: 50px !important;
+}
+.el-footer {
+  --el-footer-height: var(--base-footer-height);
+  line-height: var(--base-footer-height);
+  text-align: center;
+  color: #ccc;
 }
-
 .hasTagsView {
-  .app-main {
+  // .app-main {
-    /* 84 = navbar + tags-view = 50 + 34 */
+  //   min-height: calc(100vh - 84px - var(--base-footer-height));
-    min-height: calc(100vh - 84px);
+  // }
-  }
   .el-header {
-    --el-header-height: 84px !important;
+    --el-header-height: var(--el-header-height) + var(--el-tags-height) !important;
   }
 }
 </style>

src/main.js

@@ -2,7 +2,6 @@ import { createApp } from 'vue'
 import Cookies from 'js-cookie'
 
 import ElementPlus from 'element-plus'
-import elZhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文语言
 import 'dayjs/locale/zh-cn'
 import '@/assets/styles/index.scss' // global css
 

src/settings.js

@@ -55,5 +55,5 @@ export default {
 	/**
 	 * 版权信息
 	 */
-  copyright: 'Copyright ©2022 izhaorui.cn All Rights Reserved.'
+  copyright: 'Copyright ©2022 <a target="_black" href="http://www.izhaorui.cn">izhaorui.cn</a> All Rights Reserved.'
 }

src/store/modules/app.js

@@ -50,8 +50,8 @@ const actions = {
   toggleSideBar({ commit }) {
     commit('TOGGLE_SIDEBAR')
   },
-  closeSideBar({ commit }, { withoutAnimation }) {
+  closeSideBar({ commit }) {
-    commit('CLOSE_SIDEBAR', withoutAnimation)
+    commit('CLOSE_SIDEBAR', '')
   },
   toggleDevice({ commit }, device) {
     commit('TOGGLE_DEVICE', device)

src/views/index.vue

@@ -140,7 +140,6 @@
         </el-card> -->
       </el-col>
     </el-row>
-    <el-divider />
   </div>
 </template>
 

src/views/index_v1.vue

@@ -244,7 +244,6 @@ function onOpenGitee() {}
   }
 }
 .dashboard-editor-container {
-  padding: 18px;
   background-color: var(--base-bg-main);
   position: relative;
 

src/views/login.vue

@@ -57,7 +57,7 @@
 
     <!--  底部  -->
     <div class="el-login-footer">
-      <span>{{ defaultSettings.copyright }}</span>
+      <div v-html="defaultSettings.copyright"></div>
     </div>
   </div>
 </template>
@@ -231,9 +231,5 @@ getCookie()
   position: absolute;
   right: 20px;
   top: 10px;
-
-  .svg-icon {
-    color: #fff !important;
-  }
 }
 </style>

src/views/monitor/cache/index.vue

@@ -22,7 +22,7 @@
                     <div class="cell">运行模式</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.redis_mode == "standalone" ? "单机" : "集群" }}</div>
+                    <div class="cell" v-if="cache.info">{{ cache.info.redis_mode == 'standalone' ? '单机' : '集群' }}</div>
                   </td>
                   <td class="el-table__cell is-leaf">
                     <div class="cell">端口</div>
@@ -68,7 +68,7 @@
                     <div class="cell">AOF是否开启</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == "0" ? "否" : "是" }}</div>
+                    <div class="cell" v-if="cache.info">{{ cache.info.aof_enabled == '0' ? '否' : '是' }}</div>
                   </td>
                   <td class="el-table__cell is-leaf">
                     <div class="cell">RDB是否成功</div>
@@ -80,13 +80,15 @@
                     <div class="cell">Key数量</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.dbSize">{{ cache.dbSize }} </div>
+                    <div class="cell" v-if="cache.dbSize">{{ cache.dbSize }}</div>
                   </td>
                   <td class="el-table__cell is-leaf">
                     <div class="cell">网络入口/出口</div>
                   </td>
                   <td class="el-table__cell is-leaf">
-                    <div class="cell" v-if="cache.info">{{ cache.info.instantaneous_input_kbps }}kps/{{cache.info.instantaneous_output_kbps}}kps</div>
+                    <div class="cell" v-if="cache.info">
+                      {{ cache.info.instantaneous_input_kbps }}kps/{{ cache.info.instantaneous_output_kbps }}kps
+                    </div>
                   </td>
                 </tr>
               </tbody>
@@ -116,8 +118,15 @@
             </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <gauge name="内存消耗" :max="100"
+            <gauge
-              :data="[{ value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2), name: '内存消耗'}]" />
+              name="内存消耗"
+              :max="100"
+              :data="[
+                {
+                  value: (parseFloat(cache.info.used_memory_human) / parseFloat(cache.info.total_system_memory_human)).toFixed(2),
+                  name: '内存消耗',
+                },
+              ]" />
           </div>
         </el-card>
       </el-col>
@@ -129,7 +138,7 @@
             </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗'}]" />
+            <gauge name="CPU" :max="100" :data="[{ value: parseFloat(cache.info.used_cpu_user_children * 100).toFixed(0), name: 'CPU消耗' }]" />
           </div>
         </el-card>
       </el-col>
@@ -140,7 +149,7 @@
 <script setup name="cache">
 import { getCache } from '@/api/monitor/cache'
 import * as echarts from 'echarts'
-// import Gauge from '@/components/Echarts/Gauge.vue'
+import Gauge from '@/components/Echarts/Gauge.vue'
 
 // 统计命令信息
 const commandstats = ref(null)
@@ -180,5 +189,7 @@ function getList() {
   })
 }
 
-getList()
+onMounted(() => {
+  getList()
+})
 </script>

src/views/monitor/server/index.vue

@@ -4,65 +4,61 @@
       <el-col :lg="24" class="card-box">
         <el-card class="box-card">
           <template #header>
-            <div class="card-header clearfix">
+            <span>状态</span>
-              <span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
-            </div>
           </template>
-          <div>
+
-            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
-              <div class="title">CPU使用率</div>
+            <div class="title">CPU使用率</div>
-              <el-tooltip placement="top-end">
+            <el-tooltip placement="top-end">
-                <div class="content" v-if="server.cpu">
+              <div class="content" v-if="server.cpu">
-                  <el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
+                <el-progress type="dashboard" :percentage="parseFloat(server.cpu.cpuRate)" />
+              </div>
+            </el-tooltip>
+            <div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-if="server.cpu">
+            <div class="title">内存使用率</div>
+            <el-tooltip placement="top-end">
+              <template #content>
+                <div style="font-size: 12px">
+                  <div style="padding: 3px">总量：{{ server.cpu.totalRAM }}</div>
+                  <div style="padding: 3px">已使用：{{ server.cpu.usedRam }}</div>
+                  <div style="padding: 3px">空闲：{{ server.cpu.freeRam }}</div>
                 </div>
-              </el-tooltip>
+              </template>
-              <div class="footer" v-if="server.sys">{{ server.sys.cpuNum }} 核心</div>
+
-            </el-col>
+              <div class="content">
-            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px" v-if="server.cpu">
+                <el-progress type="dashboard" :percentage="parseFloat(server.cpu.ramRate)" />
-              <div class="title">内存使用率</div>
+              </div>
+            </el-tooltip>
+            <div class="footer">{{ server.cpu.usedRam }} / {{ server.cpu.totalRAM }}</div>
+          </el-col>
+        </el-card>
+      </el-col>
+
+      <el-col :lg="24" class="card-box">
+        <el-card>
+          <template #header>
+            <span>磁盘状态</span>
+          </template>
+          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName">
+            <div class="title">{{ sysFile.diskName }}盘使用率</div>
+            <div class="content">
               <el-tooltip placement="top-end">
                 <template #content>
-                  <div style="font-size: 12px;">
+                  <div style="font-size: 12px">
-                    <div style="padding: 3px;">
+                    <div style="padding: 3px">总量：{{ sysFile.totalSize }}GB</div>
-                      总量：{{ server.cpu.totalRAM }}
+                    <div style="padding: 3px">空闲：{{ sysFile.availableFreeSpace }}GB</div>
-                    </div>
+                    <div style="padding: 3px">已用：{{ sysFile.used }}GB</div>
-                    <div style="padding: 3px">
-                      已使用：{{ server.cpu.usedRam }}
-                    </div>
-                    <div style="padding: 3px">
-                      空闲：{{ server.cpu.freeRam }}
-                    </div>
                   </div>
                 </template>
-
                 <div class="content">
-                  <el-progress type="dashboard" :percentage="parseFloat( server.cpu.ramRate)" />
+                  <el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
                 </div>
               </el-tooltip>
-              <div class="footer"> {{server.cpu.usedRam}} / {{ server.cpu.totalRAM }}</div>
+            </div>
-            </el-col>
+            <div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
-            <!--
+          </el-col>
-            
-            <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
-              <div class="title">磁盘使用率</div>
-              <div class="content">
-                <el-tooltip placement="top-end">
-                  <div slot="content" style="font-size: 12px;">
-                    <div style="padding: 3px">
-                      总量：{{ 1 }}
-                    </div>
-                    <div style="padding: 3px">
-                      空闲：{{ 1 }}
-                    </div>
-                  </div>
-                  <div class="content">
-                    <el-progress type="dashboard" :percentage="parseFloat(3)" />
-                  </div>
-                </el-tooltip>
-              </div>
-              <div class="footer">{{ 1 }} / {{ 100 }}</div>
-            </el-col> -->
-          </div>
         </el-card>
       </el-col>
 
@@ -74,7 +70,7 @@
             </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;" v-if="server.sys">
+            <table cellspacing="0" style="width: 100%" v-if="server.sys">
               <tbody>
                 <tr>
                   <td>
@@ -124,49 +120,13 @@
         </el-card>
       </el-col>
 
-      <el-col :span="24" class="card-box">
-        <el-card>
-          <template #header>
-            <div class="card-header">
-              <span>磁盘状态</span>
-            </div>
-          </template>
-          <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="sysFile in server.disk" :key="sysFile.diskName" style="margin-bottom: 10px">
-            <div class="title">{{sysFile.diskName }}盘使用率</div>
-            <div class="content">
-              <el-tooltip placement="top-end">
-                <template #content>
-                  <div style="font-size: 12px;">
-                    <div style="padding: 3px">
-                      总量：{{ sysFile.totalSize }}GB
-                    </div>
-                    <div style="padding: 3px">
-                      空闲：{{ sysFile.availableFreeSpace }}GB
-                    </div>
-                    <div style="padding: 3px">
-                      已用：{{ sysFile.used }}GB
-                    </div>
-                  </div>
-                </template>
-                <div class="content">
-                  <el-progress type="dashboard" :percentage="parseFloat(sysFile.availablePercent)" />
-                </div>
-              </el-tooltip>
-            </div>
-            <div class="footer">{{ sysFile.availableFreeSpace }}GB可用，共{{ sysFile.totalSize }}GB</div>
-          </el-col>
-        </el-card>
-      </el-col>
-
       <el-col :lg="24" class="card-box">
         <el-card>
           <template #header>
-            <div>
+            <span>.NET Core信息</span>
-              <span>.NET Core信息</span>
-            </div>
           </template>
           <div class="el-table el-table--enable-row-hover el-table--medium">
-            <table cellspacing="0" style="width: 100%;">
+            <table cellspacing="0" style="width: 100%">
               <tbody>
                 <tr>
                   <td>
@@ -207,7 +167,7 @@
                     <div class="cell">启动地址</div>
                   </td>
                   <td>
-                    <div class="cell" v-if="server.app">{{server.app.host}}</div>
+                    <div class="cell" v-if="server.app">{{ server.app.host }}</div>
                   </td>
                 </tr>
                 <tr>
@@ -229,7 +189,6 @@
           </div>
         </el-card>
       </el-col>
-
     </el-row>
   </div>
 </template>

src/views/system/menu/index.vue

@@ -39,7 +39,7 @@
           <svg-icon :name="scope.row.icon" />
         </template>
       </el-table-column>
-      <el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="60" align="center"></el-table-column>
+      <el-table-column prop="menuId" label="菜单id" :show-overflow-tooltip="true" width="80" align="center"></el-table-column>
       <el-table-column prop="menuType" label="类型" align="center" width="80">
         <template #default="scope">
           <el-tag type="danger" v-if="scope.row.menuType == 'M' && scope.row.isFrame == 1">链接</el-tag>