refactor(dashboard): change to setup syntax

package.json

@@ -74,10 +74,10 @@
     "@types/fs-extra": "^9.0.12",
     "@types/inquirer": "^7.3.3",
     "@types/intro.js": "^3.0.2",
-    "@types/jest": "^27.0.0",
+    "@types/jest": "^27.0.1",
     "@types/lodash-es": "^4.17.4",
     "@types/mockjs": "^1.0.4",
-    "@types/node": "^16.6.0",
+    "@types/node": "^16.6.1",
     "@types/nprogress": "^0.2.0",
     "@types/qrcode": "^1.4.1",
     "@types/qs": "^6.9.7",
@@ -134,7 +134,7 @@
     "vite-plugin-theme": "^0.8.1",
     "vite-plugin-windicss": "^1.2.7",
     "vue-eslint-parser": "^7.10.0",
-    "vue-tsc": "^0.2.2"
+    "vue-tsc": "^0.2.3"
   },
   "resolutions": {
     "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",

src/views/dashboard/analysis/components/GrowCard.vue

@@ -26,18 +26,9 @@
     </template>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   import { CountTo } from '/@/components/CountTo/index';
   import { Icon } from '/@/components/Icon';
   import { Tag, Card } from 'ant-design-vue';
-
   import { growCardList } from '../data';
-  export default defineComponent({
-    components: { CountTo, Tag, Card, Icon },
-    setup() {
-      return { growCardList };
-    },
-  });
 </script>

src/views/dashboard/analysis/components/SalesProductPie.vue

@@ -3,67 +3,61 @@
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent, Ref, ref, watch } from 'vue';
-
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
-  export default defineComponent({
-    components: { Card },
-    props: {
-      loading: Boolean,
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '300px',
-      },
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
     },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      watch(
-        () => props.loading,
-        () => {
-          if (props.loading) {
-            return;
-          }
-          setOptions({
-            tooltip: {
-              trigger: 'item',
-            },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
 
-            series: [
-              {
-                name: '访问来源',
-                type: 'pie',
-                radius: '80%',
-                center: ['50%', '50%'],
-                color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
-                data: [
-                  { value: 500, name: '电子产品' },
-                  { value: 310, name: '服装' },
-                  { value: 274, name: '化妆品' },
-                  { value: 400, name: '家居' },
-                ].sort(function (a, b) {
-                  return a.value - b.value;
-                }),
-                roseType: 'radius',
-                animationType: 'scale',
-                animationEasing: 'exponentialInOut',
-                animationDelay: function () {
-                  return Math.random() * 400;
-                },
-              },
-            ],
-          });
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        tooltip: {
+          trigger: 'item',
         },
-        { immediate: true }
-      );
-      return { chartRef };
+
+        series: [
+          {
+            name: '访问来源',
+            type: 'pie',
+            radius: '80%',
+            center: ['50%', '50%'],
+            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+            data: [
+              { value: 500, name: '电子产品' },
+              { value: 310, name: '服装' },
+              { value: 274, name: '化妆品' },
+              { value: 400, name: '家居' },
+            ].sort(function (a, b) {
+              return a.value - b.value;
+            }),
+            roseType: 'radius',
+            animationType: 'scale',
+            animationEasing: 'exponentialInOut',
+            animationDelay: function () {
+              return Math.random() * 400;
+            },
+          },
+        ],
+      });
     },
-  });
+    { immediate: true }
+  );
 </script>

src/views/dashboard/analysis/components/SiteAnalysis.vue

@@ -13,34 +13,26 @@
     </p>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import { Card } from 'ant-design-vue';
-
   import VisitAnalysis from './VisitAnalysis.vue';
   import VisitAnalysisBar from './VisitAnalysisBar.vue';
 
-  export default defineComponent({
-    components: { Card, VisitAnalysis, VisitAnalysisBar },
-    setup() {
-      const activeKey = ref('tab1');
-
-      const tabListTitle = [
-        {
-          key: 'tab1',
-          tab: '流量趋势',
-        },
-        {
-          key: 'tab2',
-          tab: '访问量',
-        },
-      ];
+  const activeKey = ref('tab1');
 
-      function onTabChange(key) {
-        activeKey.value = key;
-      }
-      return { tabListTitle, activeKey, onTabChange };
+  const tabListTitle = [
+    {
+      key: 'tab1',
+      tab: '流量趋势',
     },
-  });
+    {
+      key: 'tab2',
+      tab: '访问量',
+    },
+  ];
+
+  function onTabChange(key) {
+    activeKey.value = key;
+  }
 </script>

src/views/dashboard/analysis/components/VisitAnalysis.vue

 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { defineComponent, onMounted, ref, Ref } from 'vue';
-
+<script lang="ts" setup>
+  import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-
   import { basicProps } from './props';
-  export default defineComponent({
-    props: basicProps,
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-      onMounted(() => {
-        setOptions({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              lineStyle: {
-                width: 1,
-                color: '#019680',
-              },
-            },
+  defineProps({
+    ...basicProps,
+  });
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+
+  onMounted(() => {
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
           },
-          xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            data: [
-              '6:00',
-              '7:00',
-              '8:00',
-              '9:00',
-              '10:00',
-              '11:00',
-              '12:00',
-              '13:00',
-              '14:00',
-              '15:00',
-              '16:00',
-              '17:00',
-              '18:00',
-              '19:00',
-              '20:00',
-              '21:00',
-              '22:00',
-              '23:00',
-            ],
-            splitLine: {
-              show: true,
-              lineStyle: {
-                width: 1,
-                type: 'solid',
-                color: 'rgba(226,226,226,0.5)',
-              },
-            },
-            axisTick: {
-              show: false,
-            },
+        },
+      },
+      xAxis: {
+        type: 'category',
+        boundaryGap: false,
+        data: [
+          '6:00',
+          '7:00',
+          '8:00',
+          '9:00',
+          '10:00',
+          '11:00',
+          '12:00',
+          '13:00',
+          '14:00',
+          '15:00',
+          '16:00',
+          '17:00',
+          '18:00',
+          '19:00',
+          '20:00',
+          '21:00',
+          '22:00',
+          '23:00',
+        ],
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 1,
+            type: 'solid',
+            color: 'rgba(226,226,226,0.5)',
           },
-          yAxis: [
-            {
-              type: 'value',
-              max: 80000,
-              splitNumber: 4,
-              axisTick: {
-                show: false,
-              },
-              splitArea: {
-                show: true,
-                areaStyle: {
-                  color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
-                },
-              },
+        },
+        axisTick: {
+          show: false,
+        },
+      },
+      yAxis: [
+        {
+          type: 'value',
+          max: 80000,
+          splitNumber: 4,
+          axisTick: {
+            show: false,
+          },
+          splitArea: {
+            show: true,
+            areaStyle: {
+              color: ['rgba(255,255,255,0.2)', 'rgba(226,226,226,0.2)'],
             },
+          },
+        },
+      ],
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      series: [
+        {
+          smooth: true,
+          data: [
+            111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222,
+            11111, 4000, 2000, 500, 333, 222, 111,
           ],
-          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-          series: [
-            {
-              smooth: true,
-              data: [
-                111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
-                22222, 11111, 4000, 2000, 500, 333, 222, 111,
-              ],
-              type: 'line',
-              areaStyle: {},
-              itemStyle: {
-                color: '#5ab1ef',
-              },
-            },
-            {
-              smooth: true,
-              data: [
-                33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
-                390, 198, 60, 30, 22, 11,
-              ],
-              type: 'line',
-              areaStyle: {},
-              itemStyle: {
-                color: '#019680',
-              },
-            },
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#5ab1ef',
+          },
+        },
+        {
+          smooth: true,
+          data: [
+            33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
+            198, 60, 30, 22, 11,
           ],
-        });
-      });
-      return { chartRef };
-    },
+          type: 'line',
+          areaStyle: {},
+          itemStyle: {
+            color: '#019680',
+          },
+        },
+      ],
+    });
   });
 </script>

src/views/dashboard/analysis/components/VisitAnalysisBar.vue

 <template>
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
-<script lang="ts">
-  import { defineComponent, onMounted, ref, Ref } from 'vue';
-
+<script lang="ts" setup>
+  import { onMounted, ref, Ref } from 'vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-
   import { basicProps } from './props';
-  export default defineComponent({
-    props: basicProps,
-    setup() {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
-      onMounted(() => {
-        setOptions({
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              lineStyle: {
-                width: 1,
-                color: '#019680',
-              },
-            },
-          },
-          grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
-          xAxis: {
-            type: 'category',
-            data: [
-              '1月',
-              '2月',
-              '3月',
-              '4月',
-              '5月',
-              '6月',
-              '7月',
-              '8月',
-              '9月',
-              '10月',
-              '11月',
-              '12月',
-            ],
-          },
-          yAxis: {
-            type: 'value',
-            max: 8000,
-            splitNumber: 4,
+  defineProps({
+    ...basicProps,
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  onMounted(() => {
+    setOptions({
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            width: 1,
+            color: '#019680',
           },
-          series: [
-            {
-              data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
-              type: 'bar',
-              barMaxWidth: 80,
-            },
-          ],
-        });
-      });
-      return { chartRef };
-    },
+        },
+      },
+      grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
+      xAxis: {
+        type: 'category',
+        data: [
+          '1月',
+          '2月',
+          '3月',
+          '4月',
+          '5月',
+          '6月',
+          '7月',
+          '8月',
+          '9月',
+          '10月',
+          '11月',
+          '12月',
+        ],
+      },
+      yAxis: {
+        type: 'value',
+        max: 8000,
+        splitNumber: 4,
+      },
+      series: [
+        {
+          data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800],
+          type: 'bar',
+          barMaxWidth: 80,
+        },
+      ],
+    });
   });
 </script>

src/views/dashboard/analysis/components/VisitRadar.vue

@@ -3,104 +3,98 @@
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent, Ref, ref, watch } from 'vue';
-
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
-  export default defineComponent({
-    components: { Card },
-    props: {
-      loading: Boolean,
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '300px',
-      },
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
     },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      watch(
-        () => props.loading,
-        () => {
-          if (props.loading) {
-            return;
-          }
-          setOptions({
-            legend: {
-              bottom: 0,
-              data: ['访问', '购买'],
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        legend: {
+          bottom: 0,
+          data: ['访问', '购买'],
+        },
+        tooltip: {},
+        radar: {
+          radius: '60%',
+          splitNumber: 8,
+          indicator: [
+            {
+              text: '电脑',
+              max: 100,
             },
-            tooltip: {},
-            radar: {
-              radius: '60%',
-              splitNumber: 8,
-              indicator: [
-                {
-                  text: '电脑',
-                  max: 100,
-                },
-                {
-                  text: '充电器',
-                  max: 100,
-                },
-                {
-                  text: '耳机',
-                  max: 100,
-                },
-                {
-                  text: '手机',
-                  max: 100,
-                },
-                {
-                  text: 'Ipad',
-                  max: 100,
-                },
-                {
-                  text: '耳机',
-                  max: 100,
-                },
-              ],
+            {
+              text: '充电器',
+              max: 100,
             },
-            series: [
+            {
+              text: '耳机',
+              max: 100,
+            },
+            {
+              text: '手机',
+              max: 100,
+            },
+            {
+              text: 'Ipad',
+              max: 100,
+            },
+            {
+              text: '耳机',
+              max: 100,
+            },
+          ],
+        },
+        series: [
+          {
+            type: 'radar',
+            symbolSize: 0,
+            areaStyle: {
+              shadowBlur: 0,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1,
+            },
+            data: [
               {
-                type: 'radar',
-                symbolSize: 0,
-                areaStyle: {
-                  shadowBlur: 0,
-                  shadowColor: 'rgba(0,0,0,.2)',
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 10,
-                  opacity: 1,
+                value: [90, 50, 86, 40, 50, 20],
+                name: '访问',
+                itemStyle: {
+                  color: '#b6a2de',
+                },
+              },
+              {
+                value: [70, 75, 70, 76, 20, 85],
+                name: '购买',
+                itemStyle: {
+                  color: '#5ab1ef',
                 },
-                data: [
-                  {
-                    value: [90, 50, 86, 40, 50, 20],
-                    name: '访问',
-                    itemStyle: {
-                      color: '#b6a2de',
-                    },
-                  },
-                  {
-                    value: [70, 75, 70, 76, 20, 85],
-                    name: '购买',
-                    itemStyle: {
-                      color: '#5ab1ef',
-                    },
-                  },
-                ],
               },
             ],
-          });
-        },
-        { immediate: true }
-      );
-      return { chartRef };
+          },
+        ],
+      });
     },
-  });
+    { immediate: true }
+  );
 </script>

src/views/dashboard/analysis/components/VisitSource.vue

@@ -3,86 +3,78 @@
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent, Ref, ref, watch } from 'vue';
-
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
-
-  export default defineComponent({
-    components: { Card },
-    props: {
-      loading: Boolean,
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '300px',
-      },
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
     },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      watch(
-        () => props.loading,
-        () => {
-          if (props.loading) {
-            return;
-          }
-          setOptions({
-            tooltip: {
-              trigger: 'item',
+    height: {
+      type: String as PropType<string>,
+      default: '300px',
+    },
+  });
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        tooltip: {
+          trigger: 'item',
+        },
+        legend: {
+          bottom: '1%',
+          left: 'center',
+        },
+        series: [
+          {
+            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
+            name: '访问来源',
+            type: 'pie',
+            radius: ['40%', '70%'],
+            avoidLabelOverlap: false,
+            itemStyle: {
+              borderRadius: 10,
+              borderColor: '#fff',
+              borderWidth: 2,
             },
-            legend: {
-              bottom: '1%',
-              left: 'center',
+            label: {
+              show: false,
+              position: 'center',
             },
-            series: [
-              {
-                color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
-                name: '访问来源',
-                type: 'pie',
-                radius: ['40%', '70%'],
-                avoidLabelOverlap: false,
-                itemStyle: {
-                  borderRadius: 10,
-                  borderColor: '#fff',
-                  borderWidth: 2,
-                },
-                label: {
-                  show: false,
-                  position: 'center',
-                },
-                emphasis: {
-                  label: {
-                    show: true,
-                    fontSize: '12',
-                    fontWeight: 'bold',
-                  },
-                },
-                labelLine: {
-                  show: false,
-                },
-                data: [
-                  { value: 1048, name: '搜索引擎' },
-                  { value: 735, name: '直接访问' },
-                  { value: 580, name: '邮件营销' },
-                  { value: 484, name: '联盟广告' },
-                ],
-                animationType: 'scale',
-                animationEasing: 'exponentialInOut',
-                animationDelay: function () {
-                  return Math.random() * 100;
-                },
+            emphasis: {
+              label: {
+                show: true,
+                fontSize: '12',
+                fontWeight: 'bold',
               },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: [
+              { value: 1048, name: '搜索引擎' },
+              { value: 735, name: '直接访问' },
+              { value: 580, name: '邮件营销' },
+              { value: 484, name: '联盟广告' },
             ],
-          });
-        },
-        { immediate: true }
-      );
-      return { chartRef };
+            animationType: 'scale',
+            animationEasing: 'exponentialInOut',
+            animationDelay: function () {
+              return Math.random() * 100;
+            },
+          },
+        ],
+      });
     },
-  });
+    { immediate: true }
+  );
 </script>

src/views/dashboard/analysis/index.vue

@@ -2,38 +2,24 @@
   <div class="p-4">
     <GrowCard :loading="loading" class="enter-y" />
     <SiteAnalysis class="!my-4 enter-y" :loading="loading" />
-
     <div class="md:flex enter-y">
       <VisitRadar class="md:w-1/3 w-full" :loading="loading" />
-
       <VisitSource class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full" :loading="loading" />
       <SalesProductPie class="md:w-1/3 w-full" :loading="loading" />
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import GrowCard from './components/GrowCard.vue';
   import SiteAnalysis from './components/SiteAnalysis.vue';
   import VisitSource from './components/VisitSource.vue';
   import VisitRadar from './components/VisitRadar.vue';
   import SalesProductPie from './components/SalesProductPie.vue';
 
-  export default defineComponent({
-    components: {
-      GrowCard,
-      SiteAnalysis,
-      VisitRadar,
-      VisitSource,
-      SalesProductPie,
-    },
-    setup() {
-      const loading = ref(true);
+  const loading = ref(true);
 
-      setTimeout(() => {
-        loading.value = false;
-      }, 1500);
-      return { loading };
-    },
-  });
+  setTimeout(() => {
+    loading.value = false;
+  }, 1500);
 </script>

src/views/dashboard/workbench/components/DynamicInfo.vue

@@ -3,7 +3,7 @@
     <template #extra>
       <a-button type="link" size="small">更多</a-button>
     </template>
-    <List item-layout="horizontal" :data-source="items">
+    <List item-layout="horizontal" :data-source="dynamicInfoItems">
       <template #renderItem="{ item }">
         <ListItem>
           <ListItemMeta>
@@ -21,18 +21,11 @@
     </List>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   import { Card, List } from 'ant-design-vue';
   import { dynamicInfoItems } from './data';
-  import headerImg from '/@/assets/images/header.jpg';
   import { Icon } from '/@/components/Icon';
 
-  export default defineComponent({
-    components: { Card, List, ListItem: List.Item, ListItemMeta: List.Item.Meta, Icon },
-    setup() {
-      return { items: dynamicInfoItems, headerImg };
-    },
-  });
+  const ListItem = List.Item;
+  const ListItemMeta = List.Item.Meta;
 </script>

src/views/dashboard/workbench/components/ProjectCard.vue

@@ -21,7 +21,6 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-
   import { Card } from 'ant-design-vue';
   import { Icon } from '/@/components/Icon';
   import { groupItems } from './data';

src/views/dashboard/workbench/components/QuickNav.vue

 <template>
   <Card title="快捷导航" v-bind="$attrs">
-    <template v-for="item in items" :key="item">
+    <template v-for="item in navItems" :key="item">
       <CardGrid>
         <span class="flex flex-col items-center">
           <Icon :icon="item.icon" :color="item.color" size="20" />
@@ -10,17 +10,10 @@
     </template>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
+<script lang="ts" setup>
   import { Card } from 'ant-design-vue';
-  import { Icon } from '/@/components/Icon';
   import { navItems } from './data';
+  import { Icon } from '/@/components/Icon';
 
-  export default defineComponent({
-    components: { Card, CardGrid: Card.Grid, Icon },
-    setup() {
-      return { items: navItems };
-    },
-  });
+  const CardGrid = Card.Grid;
 </script>

src/views/dashboard/workbench/components/SaleRadar.vue

@@ -3,104 +3,98 @@
     <div ref="chartRef" :style="{ width, height }"></div>
   </Card>
 </template>
-<script lang="ts">
-  import { defineComponent, Ref, ref, watch } from 'vue';
-
+<script lang="ts" setup>
+  import { Ref, ref, watch } from 'vue';
   import { Card } from 'ant-design-vue';
   import { useECharts } from '/@/hooks/web/useECharts';
 
-  export default defineComponent({
-    components: { Card },
-    props: {
-      loading: Boolean,
-      width: {
-        type: String as PropType<string>,
-        default: '100%',
-      },
-      height: {
-        type: String as PropType<string>,
-        default: '400px',
-      },
+  const props = defineProps({
+    loading: Boolean,
+    width: {
+      type: String as PropType<string>,
+      default: '100%',
+    },
+    height: {
+      type: String as PropType<string>,
+      default: '400px',
     },
-    setup(props) {
-      const chartRef = ref<HTMLDivElement | null>(null);
-      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-      watch(
-        () => props.loading,
-        () => {
-          if (props.loading) {
-            return;
-          }
-          setOptions({
-            legend: {
-              bottom: 0,
-              data: ['Visits', 'Sales'],
+  });
+
+  const chartRef = ref<HTMLDivElement | null>(null);
+  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
+  watch(
+    () => props.loading,
+    () => {
+      if (props.loading) {
+        return;
+      }
+      setOptions({
+        legend: {
+          bottom: 0,
+          data: ['Visits', 'Sales'],
+        },
+        tooltip: {},
+        radar: {
+          radius: '60%',
+          splitNumber: 8,
+          indicator: [
+            {
+              text: '2017',
+              max: 100,
             },
-            tooltip: {},
-            radar: {
-              radius: '60%',
-              splitNumber: 8,
-              indicator: [
-                {
-                  text: '2017',
-                  max: 100,
-                },
-                {
-                  text: '2017',
-                  max: 100,
-                },
-                {
-                  text: '2018',
-                  max: 100,
-                },
-                {
-                  text: '2019',
-                  max: 100,
-                },
-                {
-                  text: '2020',
-                  max: 100,
-                },
-                {
-                  text: '2021',
-                  max: 100,
-                },
-              ],
+            {
+              text: '2017',
+              max: 100,
             },
-            series: [
+            {
+              text: '2018',
+              max: 100,
+            },
+            {
+              text: '2019',
+              max: 100,
+            },
+            {
+              text: '2020',
+              max: 100,
+            },
+            {
+              text: '2021',
+              max: 100,
+            },
+          ],
+        },
+        series: [
+          {
+            type: 'radar',
+            symbolSize: 0,
+            areaStyle: {
+              shadowBlur: 0,
+              shadowColor: 'rgba(0,0,0,.2)',
+              shadowOffsetX: 0,
+              shadowOffsetY: 10,
+              opacity: 1,
+            },
+            data: [
               {
-                type: 'radar',
-                symbolSize: 0,
-                areaStyle: {
-                  shadowBlur: 0,
-                  shadowColor: 'rgba(0,0,0,.2)',
-                  shadowOffsetX: 0,
-                  shadowOffsetY: 10,
-                  opacity: 1,
+                value: [90, 50, 86, 40, 50, 20],
+                name: 'Visits',
+                itemStyle: {
+                  color: '#b6a2de',
+                },
+              },
+              {
+                value: [70, 75, 70, 76, 20, 85],
+                name: 'Sales',
+                itemStyle: {
+                  color: '#67e0e3',
                 },
-                data: [
-                  {
-                    value: [90, 50, 86, 40, 50, 20],
-                    name: 'Visits',
-                    itemStyle: {
-                      color: '#b6a2de',
-                    },
-                  },
-                  {
-                    value: [70, 75, 70, 76, 20, 85],
-                    name: 'Sales',
-                    itemStyle: {
-                      color: '#67e0e3',
-                    },
-                  },
-                ],
               },
             ],
-          });
-        },
-        { immediate: true }
-      );
-      return { chartRef };
+          },
+        ],
+      });
     },
-  });
+    { immediate: true }
+  );
 </script>

src/views/dashboard/workbench/components/WorkbenchHeader.vue

@@ -22,19 +22,12 @@
     </div>
   </div>
 </template>
-<script lang="ts">
-  import { computed, defineComponent } from 'vue';
-
+<script lang="ts" setup>
+  import { computed } from 'vue';
   import { Avatar } from 'ant-design-vue';
   import { useUserStore } from '/@/store/modules/user';
-
   import headerImg from '/@/assets/images/header.jpg';
-  export default defineComponent({
-    components: { Avatar },
-    setup() {
-      const userStore = useUserStore();
-      const userinfo = computed(() => userStore.getUserInfo);
-      return { userinfo, headerImg };
-    },
-  });
+
+  const userStore = useUserStore();
+  const userinfo = computed(() => userStore.getUserInfo);
 </script>

src/views/dashboard/workbench/index.vue

@@ -18,9 +18,8 @@
     </div>
   </PageWrapper>
 </template>
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
-
+<script lang="ts" setup>
+  import { ref } from 'vue';
   import { Card } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import WorkbenchHeader from './components/WorkbenchHeader.vue';
@@ -29,26 +28,9 @@
   import DynamicInfo from './components/DynamicInfo.vue';
   import SaleRadar from './components/SaleRadar.vue';
 
-  export default defineComponent({
-    components: {
-      PageWrapper,
-      WorkbenchHeader,
-      ProjectCard,
-      QuickNav,
-      DynamicInfo,
-      SaleRadar,
-      Card,
-    },
-    setup() {
-      const loading = ref(true);
-
-      setTimeout(() => {
-        loading.value = false;
-      }, 1500);
+  const loading = ref(true);
 
-      return {
-        loading,
-      };
-    },
-  });
+  setTimeout(() => {
+    loading.value = false;
+  }, 1500);
 </script>