💄 自适应系统信息，优化前端ui完善用户体验 (#31)

src/App.vue

@@ -15,7 +15,7 @@ export default {
   },
   computed: {
     computedHeight() {
-      return this.windowHeight
+      return this.windowHeight - 1
     },
   },
   created() {

src/components/manage/DataList.vue

@@ -308,6 +308,9 @@ export default {
     margin-top: 80px;
     border-radius: 10px;
     padding: 10px 0;
+    overflow: auto;
+    box-sizing: border-box;
+    height: calc(100% - 60px);
     // border: #4d7cfe solid 1px;
     // border-radius: 5px;
 
@@ -359,6 +362,11 @@ export default {
         .u-name {
           font-size: 20px;
           font-weight: bold;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
         }
         .uid {
           color: #9f9f9f;

src/components/manage/FriendGroupMana.vue

@@ -83,7 +83,6 @@ export default {
   .data-list {
     height: 100%;
     background-color: #f4f5fa;
-    overflow: auto;
   }
 
   .chat {

src/components/manage/RequestDialog.vue

@@ -87,7 +87,7 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="12">
+        <el-col :span="12" style="height: 100%">
           <div class="group-req">
             <div style="float: left; width: 100%">
               <p
@@ -346,8 +346,7 @@ export default {
   }
 
   .request-main {
-    height: 500px;
-    overflow: auto;
+    height: 470px;
   }
 
   ::v-deep .el-divider--vertical {
@@ -358,19 +357,43 @@ export default {
 
   .friend-req {
     padding: 20px;
-    border-right: 1px solid #dddfe5;
     box-sizing: border-box;
     height: 100%;
 
     .friend-req-list {
       margin-top: 60px;
+      overflow: auto;
+      height: calc(100% - 45px);
+      padding: 0 10px;
+      border-radius: 10px;
+      border-top: 1px solid #dddfe5;
+      border-bottom: 1px solid #dddfe5;
+      padding-bottom: 10px;
+      box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.1);
     }
   }
 
+  .mid-line {
+    height: 100%;
+    width: 1px;
+    background-color: #939395;
+  }
+
   .group-req {
     padding: 20px;
+    box-sizing: border-box;
+    height: 100%;
+
     .group-req-list {
       margin-top: 60px;
+      overflow: auto;
+      height: calc(100% - 45px);
+      padding: 0 10px;
+      border-radius: 10px;
+      border-top: 1px solid #dddfe5;
+      border-bottom: 1px solid #dddfe5;
+      padding-bottom: 10px;
+      box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.1);
     }
   }
 

src/components/system/DirTree.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main">
+  <div class="main" :style="{ height: computedMainHeight + 'px' }">
     <div class="mid-info">
       <div class="mid-box">
         <one-mark text="这是一个标记的魔法" />
@@ -9,7 +9,11 @@
           </span>
         </div>
         <div class="chart-box">
-          <div ref="resourcesChart" class="base-chart"></div>
+          <div
+            ref="resourcesChart"
+            class="base-chart"
+            :style="{ height: computedChartHeight + 'px' }"
+          ></div>
         </div>
       </div>
     </div>
@@ -229,6 +233,10 @@ export default {
   name: "DirTree",
   data() {
     return {
+      windowHeight: window.innerHeight,
+      chartHeight: 0,
+      mainHeight: 0,
+      mainTreeHeight: 0,
       codeFullPath: "",
       codeFileName: "",
       onlyRead: false,
@@ -280,13 +288,46 @@ export default {
       },
     }
   },
+  computed: {
+    computedMainHeight() {
+      if (!this.mainHeight) {
+        this.handleResize()
+      }
+      return this.mainHeight
+    },
+    computedChartHeight() {
+      if (!this.chartHeight) {
+        this.handleResize()
+      }
+      return this.chartHeight
+    },
+    computedMainTreeHeight() {
+      if (!this.mainTreeHeight) {
+        this.handleResize()
+      }
+      return this.mainTreeHeight
+    },
+  },
   mounted() {
+    window.addEventListener("resize", this.handleResize)
     this.resourcesChart = this.$echarts.init(this.$refs.resourcesChart)
     // this.getDir()
     this.loadIcons()
     this.getResourcesSize()
   },
   methods: {
+    handleResize() {
+      this.windowHeight = window.innerHeight
+      const statusBorderHeight = this.windowHeight / 3.5
+      this.mainHeight = this.windowHeight - statusBorderHeight - 130
+      this.mainTreeHeight = this.mainHeight
+      this.chartHeight = this.mainHeight - 150
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.resourcesChart.resize()
+        }, 100)
+      })
+    },
     editCode(data, onlyRead) {
       this.codeFullPath = data.full_path
       this.codeFileName = data.name
@@ -674,7 +715,6 @@ export default {
     }
   }
   .main-tree {
-    height: 727px;
     width: 60%;
     padding: 30px;
     // border: 1px solid #d3d3d4;

src/components/system/SystemStatus.vue

@@ -1,33 +1,55 @@
 <template>
   <div class="system-status">
-    <div class="chart-item">
-      <p class="title">CPU</p>
+    <div class="chart-item" :style="{ height: statusBorderHeight + 'px' }">
+      <p class="title" :style="{ fontSize: fontSizeMana.statusTip + 'px' }">
+        CPU
+      </p>
       <div class="cpu">
-        <div ref="cpuChart" class="base-chart"></div>
+        <div
+          ref="cpuChart"
+          class="base-chart"
+          :style="{ height: computedChartHeight + 'px' }"
+        ></div>
       </div>
     </div>
-    <div class="chart-item">
-      <p class="title">MEMORY</p>
+    <div class="chart-item" :style="{ height: statusBorderHeight + 'px' }">
+      <p class="title" :style="{ fontSize: fontSizeMana.statusTip + 'px' }">
+        MEMORY
+      </p>
       <div class="memory">
-        <div ref="memoryChart" class="base-chart"></div>
+        <div
+          ref="memoryChart"
+          class="base-chart"
+          :style="{ height: computedChartHeight + 'px' }"
+        ></div>
       </div>
     </div>
-
-    <div class="chart-item">
-      <p class="title">DISK</p>
+    <div class="chart-item" :style="{ height: statusBorderHeight + 'px' }">
+      <p class="title" :style="{ fontSize: fontSizeMana.statusTip + 'px' }">
+        DISK
+      </p>
       <div class="disk">
-        <div ref="diskChart" class="base-chart"></div>
+        <div
+          ref="diskChart"
+          class="base-chart"
+          :style="{ height: computedChartHeight + 'px' }"
+        ></div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getFontSize } from "@/utils/utils"
 import { mapGetters } from "vuex"
 export default {
   name: "SystemStatus",
   data() {
     return {
+      fontSizeMana: { statusTip: 25 },
+      windowHeight: window.innerHeight,
+      statusBorderHeight: 0,
+      chartHeight: 0,
       cpuChart: null,
       memoryChart: null,
       diskChart: null,
@@ -38,13 +60,23 @@ export default {
       diskOpt: null,
       chartOpt: {
         backgroundColor: "#fff",
+        grid: {
+          top: "20%", // 控制数据表距离画布顶部的距离
+          bottom: "18%", // 控制数据表距离画布底部的距禿
+          left: "15%", // 控制数据表距离画布左侧的距离
+          right: "15%", // 控制数据表距离画布右侧的距离
+        },
         // x 轴 类型与数据
         xAxis: {
           type: "category",
           data: [],
           name: "时间",
           axisLabel: {
             interval: 0, //强制显示所有标签
+            rotate: 18,
+            formatter: function (value) {
+              return value.length > 8 ? value.slice(0, 8) + "..." : value
+            },
           },
         },
         // y 轴 类型与数据
@@ -68,22 +100,46 @@ export default {
     ...mapGetters({
       statusObj: "getWsStatusObj",
     }),
+    computedStatusBorderHeight() {
+      if (!this.centerLogHeight) {
+        this.handleResize()
+      }
+      return this.statusBorderHeight
+    },
+    computedChartHeight() {
+      if (!this.chartHeight) {
+        this.handleResize()
+      }
+      return this.chartHeight
+    },
   },
   mounted() {
+    window.addEventListener("resize", this.handleResize)
     this.cpuChart = this.$echarts.init(this.$refs.cpuChart)
     this.memoryChart = this.$echarts.init(this.$refs.memoryChart)
     this.diskChart = this.$echarts.init(this.$refs.diskChart)
     this.initSystemStatus()
-    window.onresize = function () {
-      this.cpuChart.resize()
-      this.memoryChart.resize()
-      this.diskChart.resize()
-    }
     this.timer = setInterval(() => {
       this.initSystemStatus()
     }, 1000)
   },
   methods: {
+    initFontSize() {
+      this.fontSizeMana.statusTip = getFontSize(20)
+    },
+    handleResize() {
+      this.windowHeight = window.innerHeight
+      this.statusBorderHeight = this.windowHeight / 3.5
+      this.chartHeight = this.statusBorderHeight - 75
+      this.initFontSize()
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.cpuChart.resize()
+          this.memoryChart.resize()
+          this.diskChart.resize()
+        }, 100)
+      })
+    },
     initSystemStatus() {
       this.cpuOpt = JSON.parse(JSON.stringify(this.chartOpt))
       this.cpuOpt.series[0].data = this.statusObj.cpuList
@@ -110,13 +166,13 @@ export default {
 .system-status {
   padding: 20px;
   display: flex;
-  // width: 100%;
   justify-content: space-between;
 
   .chart-item {
     background-color: #fff;
     border-radius: 10px;
-    padding: 10px;
+    // padding: 20px;
+    box-sizing: border-box;
     margin-top: 10px;
     width: calc(33% - 27px);
   }
@@ -128,8 +184,6 @@ export default {
     font-size: 20px;
   }
   .base-chart {
-    // width: calc(24% - 27px);
-    // width: 500px;
     height: 240px;
   }
 }

src/components/ui/MyButton.vue

@@ -91,7 +91,7 @@ export default {
       default: 40,
     },
     disabled: { type: Boolean, default: false },
-    fontSize: { type: Number, default: 16 },
+    fontSize: { type: Number, default: 14 },
   },
   data() {
     return {

src/views/Home.vue

@@ -96,7 +96,7 @@ export default {
   },
   computed: {
     computedHeight() {
-      return this.windowHeight
+      return this.windowHeight - 1
     },
   },
   created() {