feature: 使用tsx重构界面内容

.eslintrc.js

@@ -13,6 +13,8 @@ module.exports = {
   },
   rules: {
     "@typescript-eslint/ban-ts-comment": "off",
+    // 解决 Require 类型报错
+    '@typescript-eslint/no-var-requires': 0,
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   }

babel.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+  presets: ['@vue/cli-plugin-babel/preset'],
+  plugins: ['@vue/babel-plugin-jsx']
 }

package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
+    "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",

src/assets/scss/index.scss

@@ -11,7 +11,7 @@
     width: 100%;
     height: 100%;
     padding: 16px 16px 0 16px;
-    background-image: url('../assets/pageBg.png');
+    background-image: url('../../assets/pageBg.png');
     background-size: cover;
     background-position: center center;
   }

src/components/componentInstall.ts

@@ -2,7 +2,8 @@ import type { DefineComponent } from 'vue'
 
 const component = Object.create(null)
 /* eslint-disable */
-import Echart from './echart/index.vue'
+import Echart from './echart/index'
+
 component.install = function (vue: DefineComponent) {
   // ECharts 图表渲染
   vue.component('echart', Echart)

src/components/echart/index.vue

@@ -1,18 +1,9 @@
-<template>
-  <div
-    ref="chartRef"
-    :id="id"
-    :class="className"
-    :style="{ height: height, width: width }"
-  />
-</template>
-
-<script lang="ts">
-import { defineComponent, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import { defineComponent, onMounted, ref, watch, onBeforeUnmount } from 'vue'
 import '@/common/map/fujian'
 import theme from '@/common/map/theme' // 引入默认主题
 import * as echarts from 'echarts'
 
+// 定义类型
 const PropsType = {
   id: String,
   className: {
@@ -21,11 +12,11 @@ const PropsType = {
   },
   width: {
     type: String,
-    default: '100%'
+    require: true
   },
   height: {
     type: String,
-    default: '400px'
+    require: true
   },
   options: {
     type: Object,
@@ -53,6 +44,11 @@ export default defineComponent({
       initChart()
     })
 
+    onBeforeUnmount(() => {
+      chart.value.dispose()
+      chart.value = null
+    })
+
     // 监听改变
     watch(
       () => props.options,
@@ -64,7 +60,17 @@ export default defineComponent({
       }
     )
 
-    return { chartRef }
+    return () => {
+      const { id, className, height, width } = props
+      return <div
+        ref={chartRef}
+        id={id as string}
+        class={className as string}
+        style={{
+          'height': height as string,
+          'width': width as string
+        }}
+      />
+    }
   }
-})
-</script>
+})

src/router/index.ts

@@ -4,7 +4,7 @@ const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
     name: 'Index',
-    component: () => import('../views/index.vue')
+    component: () => import('../views/index/index.vue')
   }
 ]
 

src/views/centerLeft1/chart/draw.vue

@@ -1,12 +1,6 @@
-<template>
-  <div>
-    <echart :options="options" height="220px" width="260px" />
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, watch, reactive } from 'vue'
+import { defineComponent, watch, shallowReactive } from 'vue'
 
+// 声明类型
 const PropsType = {
   cdata: {
     type: Object,
@@ -17,11 +11,13 @@ const PropsType = {
   }
 } as const
 
+// 定义主体
 export default defineComponent({
   props: PropsType,
   setup(props) {
     // 配置项
-    let options = reactive({})
+    let options = shallowReactive({})
+
     watch(
       () => props.cdata,
       (val: any) => {
@@ -71,7 +67,15 @@ export default defineComponent({
         deep: true
       }
     )
-    return { options }
+
+    return () => {
+      const height = "220px"
+      const width = "260px"
+      
+      return <div>
+        <echart options={options} height={height} width={width} />
+      </div>
+    }
   }
 })
-</script>
+

src/views/centerLeft1/chart/index.vue

@@ -1,12 +1,5 @@
-<template>
-  <div>
-    <Draw :cdata="cdata" />
-  </div>
-</template>
-
-<script lang="ts">
-import Draw from './draw.vue'
-import { defineComponent, onMounted, reactive } from 'vue'
+import { defineComponent, reactive } from 'vue'
+import Draw from './draw'
 
 export default defineComponent({
   components: {
@@ -24,9 +17,11 @@ export default defineComponent({
         { value: 35, name: 'rose6' }
       ]
     })
-    return { cdata }
-  }
-})
-</script>
 
-<style lang="scss" scoped></style>
+    return () => {
+      return <div>
+        <Draw cdata={cdata} />
+      </div>
+    }
+  }
+})

src/views/centerLeft1/index.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, reactive } from 'vue'
-import Chart from './chart/index.vue'
+import Chart from './chart/index'
 export default defineComponent({
   components: {
     Chart,
@@ -95,13 +95,16 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+$box-width: 300px;
+$box-height: 410px;
+
 .centreLeft1 {
   padding: 16px;
-  height: 410px;
-  min-width: 300px;
+  height: $box-height;
+  width: $box-width;
   border-radius: 5px;
   .bg-color-black {
-    height: 385px;
+    height: $box-height - 20px;
     border-radius: 10px;
   }
   .text {

src/views/index.vue

@@ -98,7 +98,7 @@ import { formatTime } from '@/utils/index'
 import { WEEK } from '@/constant/index'
 import useIndex from '@/utils/useDraw'
 import { title, subtitle, moduleInfo } from '@/constant/index'
-import CenterLeft1 from "./centerLeft1/index.vue";
+import CenterLeft1 from "../centerLeft1/index.vue";
 
 export default defineComponent({
   components: {

yarn.lock

@@ -1255,7 +1255,7 @@
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
   integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
 
-"@vue/babel-plugin-jsx@^1.0.3":
+"@vue/babel-plugin-jsx@^1.0.3", "@vue/babel-plugin-jsx@^1.0.6":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.0.6.tgz#184bf3541ab6efdbe5079ab8b20c19e2af100bfb"
   integrity sha512-RzYsvBhzKUmY2YG6LoV+W5PnlnkInq0thh1AzCmewwctAgGN6e9UFon6ZrQQV1CO5G5PeME7MqpB+/vvGg0h4g==