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

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

Author: bypanghu

web/package.json

@@ -14,6 +14,7 @@
         "@vue-office/docx": "^1.3.0",
         "@vue-office/excel": "^1.4.5",
         "@vue-office/pdf": "^1.5.3",
+        "@vueuse/core": "^10.7.2",
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-vue": "^5.1.12",
         "axios": "^1.4.0",

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>

web/vite.config.js

@@ -66,7 +66,7 @@ export default ({
         // detail: https://cli.vuejs.org/config/#devserver-proxy
         [process.env.VITE_BASE_API]: { // 需要代理的路径   例如 '/api'
           target: `${process.env.VITE_BASE_PATH}:${process.env.VITE_SERVER_PORT}/`, // 代理到 目标路径
-          changeOrigin: false,
+          changeOrigin: true,
           rewrite: path => path.replace(new RegExp('^' + process.env.VITE_BASE_API), ''),
         }
       },