fix:修复首页 dashboard echarts 页面变化导致的变性, 修复 vite.config.js 中 proxy 代理 https 时的 bug (#1623)

add : 添加 “@vueuse/core” 的依赖，添加全局 hooks （use-windows-resize）使用方法查看 dashboard 页面

web/src/hooks/use-windows-resize.js

@@ -0,0 +1,23 @@
+// 监听 window 的 resize 事件，返回当前窗口的宽高
+import { shallowRef } from 'vue'
+import { tryOnMounted, useEventListener } from '@vueuse/core'
+
+const width = shallowRef(0)
+const height = shallowRef(0)
+
+export const useWindowResize = (cb) => {
+  const onResize = () => {
+    width.value = window.innerWidth
+    height.value = window.innerHeight
+    if (cb && typeof cb === 'function') {
+      cb(width.value, height.value)
+    }
+  }
+
+  tryOnMounted(onResize)
+  useEventListener('resize', onResize, { passive: true })
+  return {
+    width,
+    height,
+  }
+}

web/src/view/dashboard/dashboardCharts/echartsLine.vue

@@ -11,9 +11,8 @@
 </template>
 <script setup>
 import * as echarts from 'echarts'
-import { nextTick, onMounted, onUnmounted, ref, shallowRef } from 'vue'
-// import 'echarts/theme/macarons'
-
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useWindowResize } from '@/hooks/use-windows-resize'
 var dataAxis = []
 for (var i = 1; i < 13; i++) {
   dataAxis.push(`${i}月`)
@@ -35,19 +34,29 @@ var data = [
 var yMax = 500
 var dataShadow = []
 
-// eslint-disable-next-line no-redeclare
-for (var i = 0; i < data.length; i++) {
+for (let i = 0; i < data.length; i++) {
   dataShadow.push(yMax)
 }
 
-const chart = shallowRef(null)
+let chart = null
 const echart = ref(null)
+
+useWindowResize(() => {
+  if (!chart) {
+    return
+  }
+  chart.resize()
+})
+
 const initChart = () => {
-  chart.value = echarts.init(echart.value /* 'macarons' */)
+  if (chart) {
+    chart = null
+  }
+  chart = echarts.init(echart.value)
   setOptions()
 }
 const setOptions = () => {
-  chart.value.setOption({
+  chart.setOption({
     grid: {
       left: '40',
       right: '20',
@@ -107,11 +116,11 @@ onMounted(async() => {
 })
 
 onUnmounted(() => {
-  if (!chart.value) {
+  if (!chart) {
     return
   }
-  chart.value.dispose()
-  chart.value = null
+  chart.dispose()
+  chart = null
 })
 </script>
 <style lang="scss" scoped>