支持 Vue 3.2.x 语法升级为，script setup

src/views/dashboard/console/console.vue

@@ -13,30 +13,40 @@
             <n-tag type="success">日</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              日同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
-              <n-icon size="12" color="#00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <component is="CaretUpOutlined" />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              周同比
-              <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
-              <n-icon size="12" color="#ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="visits.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <component is="CaretDownOutlined" />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总访问量： </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" :endVal="visits.amount" />
-              </div>
+              <n-skeleton v-if="loading" text :repeat="2" />
+              <template v-else>
+                <div class="text-sn"> 总访问量： </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" :endVal="visits.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -52,7 +62,14 @@
             <n-tag type="info">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="saleroom.weekSaleroom" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo
+              v-else
+              prefix="￥"
+              :startVal="1"
+              :endVal="saleroom.weekSaleroom"
+              class="text-3xl"
+            />
           </div>
           <div class="py-2 px-2 flex justify-between">
             <div class="text-sn flex-1">
@@ -66,10 +83,13 @@
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总销售额： </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总销售额： </div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="saleroom.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -85,30 +105,40 @@
             <n-tag type="warning">周</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else :startVal="1" :endVal="orderLarge.weekLarge" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              日同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
-              <n-icon size="12" color="#00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                日同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <component is="CaretUpOutlined" />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              周同比
-              <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
-              <n-icon size="12" color="#ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                周同比
+                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.rise" />
+                <n-icon size="12" color="#ffde66">
+                  <component is="CaretDownOutlined" />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 转化率： </div>
-              <div class="text-sn">
-                <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 转化率： </div>
+                <div class="text-sn">
+                  <CountTo :startVal="1" suffix="%" :endVal="orderLarge.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -124,30 +154,40 @@
             <n-tag type="error">月</n-tag>
           </template>
           <div class="py-1 px-1 flex justify-between">
-            <CountTo prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
+            <n-skeleton v-if="loading" :width="100" size="medium" />
+            <CountTo v-else prefix="￥" :startVal="1" :endVal="volume.weekLarge" class="text-3xl" />
           </div>
           <div class="py-1 px-1 flex justify-between">
             <div class="text-sn">
-              月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
-              <n-icon size="12" color="#00ff6f">
-                <component is="CaretUpOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume.rise" />
+                <n-icon size="12" color="#00ff6f">
+                  <component is="CaretUpOutlined" />
+                </n-icon>
+              </template>
             </div>
             <div class="text-sn">
-              月同比
-              <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
-              <n-icon size="12" color="#ffde66">
-                <component is="CaretDownOutlined" />
-              </n-icon>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                月同比
+                <CountTo :startVal="1" suffix="%" :endVal="volume.decline" />
+                <n-icon size="12" color="#ffde66">
+                  <component is="CaretDownOutlined" />
+                </n-icon>
+              </template>
             </div>
           </div>
           <template #footer>
             <div class="flex justify-between">
-              <div class="text-sn"> 总成交额： </div>
-              <div class="text-sn">
-                <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
-              </div>
+              <n-skeleton v-if="loading" :width="100" size="medium" />
+              <template v-else>
+                <div class="text-sn"> 总成交额： </div>
+                <div class="text-sn">
+                  <CountTo prefix="￥" :startVal="1" :endVal="volume.amount" />
+                </div>
+              </template>
             </div>
           </template>
         </NCard>
@@ -160,7 +200,8 @@
         <n-grid-item v-for="(item, index) in iconList" :key="index">
           <NCard content-style="padding-top: 0;" size="small" :bordered="false">
             <template #footer>
-              <div class="cursor-pointer">
+              <n-skeleton v-if="loading" size="medium" />
+              <div class="cursor-pointer" v-else>
                 <p class="flex justify-center">
                   <span>
                     <n-icon :size="item.size" class="flex-1" :color="item.color">
@@ -182,113 +223,115 @@
     <VisiTab />
   </div>
 </template>
-<script lang="ts">
-  import { defineComponent, onMounted, reactive, toRefs } from 'vue';
-  import Icons from './components/Icons';
+<script lang="ts" setup>
+  import { ref, onMounted } from 'vue';
+  import { getConsoleInfo } from '@/api/dashboard/console';
   import VisiTab from './components/VisiTab.vue';
   import { CountTo } from '@/components/CountTo/index';
-  import { getConsoleInfo } from '@/api/dashboard/console';
+  import {
+    CaretUpOutlined,
+    CaretDownOutlined,
+    UsergroupAddOutlined,
+    BarChartOutlined,
+    ShoppingCartOutlined,
+    AccountBookOutlined,
+    CreditCardOutlined,
+    MailOutlined,
+    TagsOutlined,
+    SettingOutlined,
+  } from '@vicons/antd';
 
-  export default defineComponent({
-    components: { ...Icons, VisiTab, CountTo },
-    setup() {
-      const state = reactive({
-        cardHeaderStyle: {
-          'border-bottom': '1px solid #eee',
-          'font-size': '16px',
-        },
-        visits: {},
-        saleroom: {},
-        orderLarge: {},
-        volume: {},
-      });
-      // 图标列表
-      const iconList = [
-        {
-          icon: 'UsergroupAddOutlined',
-          size: '32',
-          title: '用户',
-          color: '#69c0ff',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'BarChartOutlined',
-          size: '32',
-          title: '分析',
-          color: '#69c0ff',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'ShoppingCartOutlined',
-          size: '32',
-          title: '商品',
-          color: '#ff9c6e',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'AccountBookOutlined',
-          size: '32',
-          title: '订单',
-          color: '#b37feb',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'CreditCardOutlined',
-          size: '32',
-          title: '票据',
-          color: '#ffd666',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'MailOutlined',
-          size: '32',
-          title: '消息',
-          color: '#5cdbd3',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'TagsOutlined',
-          size: '32',
-          title: '标签',
-          color: '#ff85c0',
-          eventObject: {
-            click: () => {},
-          },
-        },
-        {
-          icon: 'SettingOutlined',
-          size: '32',
-          title: '配置',
-          color: '#ffc069',
-          eventObject: {
-            click: () => {},
-          },
-        },
-      ];
-      onMounted(async () => {
-        const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
-        state.visits = visits;
-        state.saleroom = saleroom;
-        state.orderLarge = orderLarge;
-        state.volume = volume;
-      });
-      return {
-        ...toRefs(state),
-        iconList,
-      };
+  const cardHeaderStyle = ref({ 'border-bottom': '1px solid #eee', 'font-size': '16px' });
+
+  const loading = ref(true);
+  const visits = ref({});
+  const saleroom = ref({});
+  const orderLarge = ref({});
+  const volume = ref({});
+
+  // 图标列表
+  const iconList = [
+    {
+      icon: UsergroupAddOutlined,
+      size: '32',
+      title: '用户',
+      color: '#69c0ff',
+      eventObject: {
+        click: () => {},
+      },
     },
+    {
+      icon: BarChartOutlined,
+      size: '32',
+      title: '分析',
+      color: '#69c0ff',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: ShoppingCartOutlined,
+      size: '32',
+      title: '商品',
+      color: '#ff9c6e',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: AccountBookOutlined,
+      size: '32',
+      title: '订单',
+      color: '#b37feb',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: CreditCardOutlined,
+      size: '32',
+      title: '票据',
+      color: '#ffd666',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: MailOutlined,
+      size: '32',
+      title: '消息',
+      color: '#5cdbd3',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: TagsOutlined,
+      size: '32',
+      title: '标签',
+      color: '#ff85c0',
+      eventObject: {
+        click: () => {},
+      },
+    },
+    {
+      icon: SettingOutlined,
+      size: '32',
+      title: '配置',
+      color: '#ffc069',
+      eventObject: {
+        click: () => {},
+      },
+    },
+  ];
+
+  onMounted(async () => {
+    const { visits, saleroom, orderLarge, volume } = await getConsoleInfo();
+    visits.value = visits;
+    saleroom.value = saleroom;
+    orderLarge.value = orderLarge;
+    volume.value = volume;
+    loading.value = false;
   });
 </script>
 

src/views/dashboard/monitor/monitor.vue

@@ -2,15 +2,6 @@
   <div>监控台</div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {},
-    setup() {
-      return {};
-    },
-  });
-</script>
+<script lang="ts" setup></script>
 
 <style lang="less" scoped></style>

src/views/dashboard/workplace/workplace.vue

@@ -298,7 +298,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
   import schoolboy from '@/assets/images/schoolboy.png';
   import {
     GithubOutlined,
@@ -310,30 +310,6 @@
     Html5Outlined,
   } from '@vicons/antd';
   import { LogoVue, LogoAngular, LogoReact, LogoJavascript } from '@vicons/ionicons5';
-
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'DashboardWorkplace',
-    components: {
-      GithubOutlined,
-      LogoVue,
-      DashboardOutlined,
-      ProfileOutlined,
-      FileProtectOutlined,
-      SettingOutlined,
-      ApartmentOutlined,
-      Html5Outlined,
-      LogoAngular,
-      LogoReact,
-      LogoJavascript,
-    },
-    setup() {
-      return {
-        schoolboy,
-      };
-    },
-  });
 </script>
 
 <style lang="less" scoped>