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,15 +3,12 @@
     <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: {
+  const props = defineProps({
     loading: Boolean,
     width: {
       type: String as PropType<string>,
@@ -21,8 +18,8 @@
       type: String as PropType<string>,
       default: '300px',
     },
-    },
-    setup(props) {
+  });
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   watch(
@@ -63,7 +60,4 @@
     },
     { immediate: true }
   );
-      return { chartRef };
-    },
-  });
 </script>

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

@@ -13,17 +13,12 @@
     </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 = [
@@ -40,7 +35,4 @@
   function onTabChange(key) {
     activeKey.value = key;
   }
-      return { tabListTitle, activeKey, onTabChange };
-    },
-  });
 </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() {
+
+  defineProps({
+    ...basicProps,
+  });
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
 
@@ -80,8 +79,8 @@
         {
           smooth: true,
           data: [
-                111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444,
-                22222, 11111, 4000, 2000, 500, 333, 222, 111,
+            111, 222, 4000, 18000, 33333, 55555, 66666, 33333, 14000, 36000, 66666, 44444, 22222,
+            11111, 4000, 2000, 500, 333, 222, 111,
           ],
           type: 'line',
           areaStyle: {},
@@ -92,8 +91,8 @@
         {
           smooth: true,
           data: [
-                33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201,
-                390, 198, 60, 30, 22, 11,
+            33, 66, 88, 333, 3333, 5000, 18000, 3000, 1200, 13000, 22000, 11000, 2221, 1201, 390,
+            198, 60, 30, 22, 11,
           ],
           type: 'line',
           areaStyle: {},
@@ -104,7 +103,4 @@
       ],
     });
   });
-      return { chartRef };
-    },
-  });
 </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() {
+
+  defineProps({
+    ...basicProps,
+  });
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
-
   onMounted(() => {
     setOptions({
       tooltip: {
@@ -56,7 +55,4 @@
       ],
     });
   });
-      return { chartRef };
-    },
-  });
 </script>

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

@@ -3,15 +3,12 @@
     <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: {
+  const props = defineProps({
     loading: Boolean,
     width: {
       type: String as PropType<string>,
@@ -21,8 +18,8 @@
       type: String as PropType<string>,
       default: '300px',
     },
-    },
-    setup(props) {
+  });
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   watch(
@@ -100,7 +97,4 @@
     },
     { immediate: true }
   );
-      return { chartRef };
-    },
-  });
 </script>

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

@@ -3,15 +3,11 @@
     <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: {
+  const props = defineProps({
     loading: Boolean,
     width: {
       type: String as PropType<string>,
@@ -21,8 +17,7 @@
       type: String as PropType<string>,
       default: '300px',
     },
-    },
-    setup(props) {
+  });
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   watch(
@@ -82,7 +77,4 @@
     },
     { immediate: true }
   );
-      return { chartRef };
-    },
-  });
 </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);
 
   setTimeout(() => {
     loading.value = false;
   }, 1500);
-      return { loading };
-    },
-  });
 </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,15 +3,12 @@
     <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: {
+  const props = defineProps({
     loading: Boolean,
     width: {
       type: String as PropType<string>,
@@ -21,8 +18,8 @@
       type: String as PropType<string>,
       default: '400px',
     },
-    },
-    setup(props) {
+  });
+
   const chartRef = ref<HTMLDivElement | null>(null);
   const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
   watch(
@@ -100,7 +97,4 @@
     },
     { immediate: true }
   );
-      return { chartRef };
-    },
-  });
 </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 };
-    },
-  });
 </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);
-
-      return {
-        loading,
-      };
-    },
-  });
 </script>