前端页面改造基本完成 待优化

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

@@ -9,9 +9,9 @@
     />
   </div>
 </template>
-<script>
+<script setup>
 import * as echarts from 'echarts'
-import { toRaw } from 'vue'
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
 import 'echarts/theme/macarons'
 
 var dataAxis = []
@@ -40,86 +40,79 @@ for (var i = 0; i < data.length; i++) {
   dataShadow.push(yMax)
 }
 
-export default {
-  name: 'Line',
-  data() {
-    return {
-      chart: null,
-    }
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart()
-    })
-  },
-  beforeUnmount() {
-    if (!this.chart) {
-      return
-    }
-    this.chart.dispose()
-    this.chart = null
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$refs.echart, 'macarons')
-      this.setOptions()
-    },
-    setOptions() {
-      toRaw(this.chart).setOption({
-        grid: {
-          left: '40',
-          right: '20',
-          top: '40',
-          bottom: '20',
-        },
-        xAxis: {
-          data: dataAxis,
-          axisTick: {
-            show: false,
-          },
-          axisLine: {
-            show: false,
-          },
-          z: 10,
-        },
-        yAxis: {
-          axisLine: {
-            show: false,
-          },
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#999',
-            },
-          },
-        },
-        dataZoom: [
-          {
-            type: 'inside',
-          },
-        ],
-        series: [
-          {
-            type: 'bar',
-            barWidth: '40%',
-            itemStyle: {
-              borderRadius: [5, 5, 0, 0],
-              color: '#188df0',
-            },
-            emphasis: {
-              itemStyle: {
-                color: '#188df0',
-              },
-            },
-            data: data,
-          },
-        ],
-      })
-    },
-  },
+const chart = ref(null)
+const echart = ref(null)
+const initChart = () => {
+  chart.value = echarts.init(echart.value, 'macarons')
+  setOptions()
 }
+const setOptions = () => {
+  chart.value.setOption({
+    grid: {
+      left: '40',
+      right: '20',
+      top: '40',
+      bottom: '20',
+    },
+    xAxis: {
+      data: dataAxis,
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+      },
+      z: 10,
+    },
+    yAxis: {
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        textStyle: {
+          color: '#999',
+        },
+      },
+    },
+    dataZoom: [
+      {
+        type: 'inside',
+      },
+    ],
+    series: [
+      {
+        type: 'bar',
+        barWidth: '40%',
+        itemStyle: {
+          borderRadius: [5, 5, 0, 0],
+          color: '#188df0',
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#188df0',
+          },
+        },
+        data: data,
+      },
+    ],
+  })
+}
+
+onMounted(async() => {
+  await nextTick()
+  initChart()
+})
+
+onUnmounted(() => {
+  if (!chart.value) {
+    return
+  }
+  chart.value.dispose()
+  chart.value = null
+})
 </script>
 <style lang="scss" scoped>
 .dashboard-line-box {

web/src/view/dashboard/dashboardTable/dashboardTable.vue

@@ -14,37 +14,37 @@
 </template>
 
 <script>
-import { Commits } from '@/api/github'
-import { formatTimeToStr } from '@/utils/date.js'
 export default {
-  data() {
-    return {
-      loading: true,
-      dataTimeline: [],
-    }
-  },
-  created() {
-    this.loadCommits()
-  },
-  methods: {
-    loadCommits() {
-      Commits(0).then(({ data }) => {
-        this.loading = false
-        data.forEach((element, index) => {
-          if (element.commit.message && index < 10) {
-            this.dataTimeline.push({
-              from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'),
-              title: element.commit.author.name,
-              showDayAndMonth: true,
-              message: element.commit.message,
-            })
-          }
-        })
-      })
-    },
-  }
+  name: 'DashboardTable',
 }
 </script>
+<script setup>
+import { Commits } from '@/api/github'
+import { formatTimeToStr } from '@/utils/date.js'
+import { ref } from 'vue-demi'
+
+const loading = ref(true)
+const dataTimeline = ref([])
+
+const loadCommits = () => {
+  Commits(0).then(({ data }) => {
+    loading.value = false
+    data.forEach((element, index) => {
+      if (element.commit.message && index < 10) {
+        dataTimeline.value.push({
+          from: formatTimeToStr(element.commit.author.date, 'yyyy-MM-dd'),
+          title: element.commit.author.name,
+          showDayAndMonth: true,
+          message: element.commit.message,
+        })
+      }
+    })
+  })
+}
+
+loadCommits()
+</script>
+
 <style lang="scss" scoped>
 .commit-table{
     background-color: #fff;

web/src/view/dashboard/index.vue

@@ -103,68 +103,68 @@
     </div>
   </div>
 </template>
-<script>
+
+<script setup>
 import echartsLine from '@/view/dashboard/dashboardCharts/echartsLine.vue'
 import dashboardTable from '@/view/dashboard/dashboardTable/dashboardTable.vue'
-export default {
-  name: 'Dashboard',
-  components: {
-    echartsLine,
-    dashboardTable
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const toolCards = ref([
+  {
+    label: '用户管理',
+    icon: 'monitor',
+    name: 'user',
+    color: '#ff9c6e',
+    bg: 'rgba(255, 156, 110,.3)'
   },
-  data() {
-    return {
-      toolCards: [
-        {
-          label: '用户管理',
-          icon: 'monitor',
-          name: 'user',
-          color: '#ff9c6e',
-          bg: 'rgba(255, 156, 110,.3)'
-        },
-        {
-          label: '角色管理',
-          icon: 'setting',
-          name: 'authority',
-          color: '#69c0ff',
-          bg: 'rgba(105, 192, 255,.3)'
-        },
-        {
-          label: '菜单管理',
-          icon: 'menu',
-          name: 'menu',
-          color: '#b37feb',
-          bg: 'rgba(179, 127, 235,.3)'
-        },
-        {
-          label: '代码生成器',
-          icon: 'cpu',
-          name: 'autoCode',
-          color: '#ffd666',
-          bg: 'rgba(255, 214, 102,.3)'
-        },
-        {
-          label: '表单生成器',
-          icon: 'document-checked',
-          name: 'formCreate',
-          color: '#ff85c0',
-          bg: 'rgba(255, 133, 192,.3)'
-        },
-        {
-          label: '关于我们',
-          icon: 'user',
-          name: 'about',
-          color: '#5cdbd3',
-          bg: 'rgba(92, 219, 211,.3)'
-        }
-      ]
-    }
+  {
+    label: '角色管理',
+    icon: 'setting',
+    name: 'authority',
+    color: '#69c0ff',
+    bg: 'rgba(105, 192, 255,.3)'
   },
-  methods: {
-    toTarget(name) {
-      this.$router.push({ name })
-    }
+  {
+    label: '菜单管理',
+    icon: 'menu',
+    name: 'menu',
+    color: '#b37feb',
+    bg: 'rgba(179, 127, 235,.3)'
+  },
+  {
+    label: '代码生成器',
+    icon: 'cpu',
+    name: 'autoCode',
+    color: '#ffd666',
+    bg: 'rgba(255, 214, 102,.3)'
+  },
+  {
+    label: '表单生成器',
+    icon: 'document-checked',
+    name: 'formCreate',
+    color: '#ff85c0',
+    bg: 'rgba(255, 133, 192,.3)'
+  },
+  {
+    label: '关于我们',
+    icon: 'user',
+    name: 'about',
+    color: '#5cdbd3',
+    bg: 'rgba(92, 219, 211,.3)'
   }
+])
+
+const router = useRouter()
+
+const toTarget = (name) => {
+  router.push({ name })
+}
+
+</script>
+<script>
+export default {
+  name: 'Dashboard'
 }
 </script>