perf: home page

package.json

@@ -22,6 +22,7 @@
     "@logicflow/core": "^0.7.1",
     "@logicflow/extension": "^0.7.1",
     "@vueuse/core": "^6.7.1",
+    "@vueuse/motion": "^2.0.0-beta.4",
     "animate.css": "^4.1.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.21.1",

src/main.ts

@@ -4,6 +4,7 @@ import { setupStore } from "/@/store";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { usI18n } from "../src/plugins/i18n";
+import { MotionPlugin } from "@vueuse/motion";
 import { useTable } from "../src/plugins/vxe-table";
 import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
@@ -27,7 +28,12 @@ Object.keys(directives).forEach(key => {
 getServerConfig(app).then(async config => {
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(router).use(useElementPlus).use(useTable).use(usI18n);
+  app
+    .use(router)
+    .use(MotionPlugin)
+    .use(useElementPlus)
+    .use(useTable)
+    .use(usI18n);
   await router.isReady();
   app.mount("#app");
 });

src/views/welcome.vue

@@ -13,7 +13,7 @@ let loading = ref<boolean>(true);
 
 setTimeout(() => {
   loading.value = !loading.value;
-}, 500);
+}, 800);
 
 let greetings = computed(() => {
   if (date.getHours() >= 0 && date.getHours() < 12) {
@@ -51,15 +51,31 @@ const openDepot = (): void => {
         :lg="12"
         :xl="12"
         style="margin-bottom: 20px"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
       >
-        <el-skeleton animated :rows="7" :loading="false">
-          <template #default>
-            <el-card>
-              <h4>GitHub信息</h4>
-              <ReGithub />
-            </el-card>
+        <el-card>
+          <template #header>
+            <div>
+              <span>GitHub信息</span>
+            </div>
           </template>
-        </el-skeleton>
+          <el-skeleton animated :rows="7" :loading="loading">
+            <template #default>
+              <ReGithub />
+            </template>
+          </el-skeleton>
+        </el-card>
       </el-col>
 
       <el-col
@@ -69,15 +85,31 @@ const openDepot = (): void => {
         :lg="12"
         :xl="12"
         style="margin-bottom: 20px"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 200
+          }
+        }"
       >
-        <el-skeleton animated :rows="7" :loading="false">
-          <template #default>
-            <el-card>
-              <h4>GitHub滚动信息</h4>
-              <ReInfinite />
-            </el-card>
+        <el-card>
+          <template #header>
+            <div>
+              <span>GitHub滚动信息</span>
+            </div>
           </template>
-        </el-skeleton>
+          <el-skeleton animated :rows="7" :loading="loading">
+            <template #default>
+              <ReInfinite />
+            </template>
+          </el-skeleton>
+        </el-card>
       </el-col>
 
       <el-col
@@ -87,15 +119,31 @@ const openDepot = (): void => {
         :lg="8"
         :xl="8"
         style="margin-bottom: 20px"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 400
+          }
+        }"
       >
-        <el-skeleton animated :rows="7" :loading="false">
-          <template #default>
-            <el-card>
-              <h4>GitHub饼图信息</h4>
-              <RePie />
-            </el-card>
+        <el-card>
+          <template #header>
+            <div>
+              <span>GitHub饼图信息</span>
+            </div>
           </template>
-        </el-skeleton>
+          <el-skeleton animated :rows="7" :loading="loading">
+            <template #default>
+              <RePie />
+            </template>
+          </el-skeleton>
+        </el-card>
       </el-col>
 
       <el-col
@@ -105,15 +153,31 @@ const openDepot = (): void => {
         :lg="8"
         :xl="8"
         style="margin-bottom: 20px"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 400
+          }
+        }"
       >
-        <el-skeleton animated :rows="7" :loading="false">
-          <template #default>
-            <el-card>
-              <h4>GitHub折线图信息</h4>
-              <ReLine />
-            </el-card>
+        <el-card>
+          <template #header>
+            <div>
+              <span>GitHub折线图信息</span>
+            </div>
           </template>
-        </el-skeleton>
+          <el-skeleton animated :rows="7" :loading="loading">
+            <template #default>
+              <ReLine />
+            </template>
+          </el-skeleton>
+        </el-card>
       </el-col>
 
       <el-col
@@ -123,15 +187,31 @@ const openDepot = (): void => {
         :lg="8"
         :xl="1"
         style="margin-bottom: 20px"
+        v-motion
+        :initial="{
+          opacity: 0,
+          y: 100
+        }"
+        :enter="{
+          opacity: 1,
+          y: 0,
+          transition: {
+            delay: 400
+          }
+        }"
       >
-        <el-skeleton animated :rows="7" :loading="false">
-          <template #default>
-            <el-card>
-              <h4>GitHub柱状图信息</h4>
-              <ReBar />
-            </el-card>
+        <el-card>
+          <template #header>
+            <div>
+              <span>GitHub柱状图信息</span>
+            </div>
           </template>
-        </el-skeleton>
+          <el-skeleton animated :rows="7" :loading="loading">
+            <template #default>
+              <ReBar />
+            </template>
+          </el-skeleton>
+        </el-card>
       </el-col>
     </el-row>
   </div>

yarn.lock

@@ -892,7 +892,7 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.20.tgz#53746961f731a8ea666e3316271e944238dc31db"
   integrity sha512-FbpX+hD5BvXCQerEYO7jtAGHlhAkhTQ4KIV73kmLWNlawWhTiVuQxizgVb0BOkX5oG9cIRZ42EG++d/k/Efp0w==
 
-"@vueuse/core@^6.7.1":
+"@vueuse/core@^6.5.3", "@vueuse/core@^6.7.1":
   version "6.7.4"
   resolved "https://registry.npmjs.org/@vueuse/core/-/core-6.7.4.tgz#8e15524454388b11c9eb6ff59a6742602b976e2f"
   integrity sha512-y39SD+pxDkv7/Fe369c02FQpr/148otQr64ScPDTpw4fGnspc8ONXCNU3gTrvDFRuiylirdPBpXgmt/GDQO7RA==
@@ -908,6 +908,15 @@
     "@vueuse/shared" "6.1.0"
     vue-demi "*"
 
+"@vueuse/motion@^2.0.0-beta.4":
+  version "2.0.0-beta.4"
+  resolved "https://registry.npmjs.org/@vueuse/motion/-/motion-2.0.0-beta.4.tgz#08f9a151f29bc1539316c49000c67efea194498d"
+  integrity sha512-+4lnWz+KdaVmpeUwDyguTApzmjB+NzpxwBL/AcAMhVqp4G6rm8ywGSJaHGJG04uSNIQkJ6dUJx2zppnRxDSyrA==
+  dependencies:
+    "@vueuse/core" "^6.5.3"
+    popmotion "^10.0.1"
+    vue-demi "*"
+
 "@vueuse/shared@6.1.0":
   version "6.1.0"
   resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-6.1.0.tgz#1375fd41acefe52f9a1842f3c6a8a348786535ba"
@@ -2294,6 +2303,13 @@ fraction.js@^4.1.1:
   resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz#ac4e520473dae67012d618aab91eda09bcb400ff"
   integrity sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==
 
+framesync@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fs-extra@^10.0.0:
   version "10.0.0"
   resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1"
@@ -2511,6 +2527,11 @@ header-case@^2.0.4:
     capital-case "^1.0.4"
     tslib "^2.0.3"
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
@@ -3473,6 +3494,16 @@ please-upgrade-node@^3.2.0:
   dependencies:
     semver-compare "^1.0.0"
 
+popmotion@^10.0.1:
+  version "10.0.2"
+  resolved "https://registry.npmjs.org/popmotion/-/popmotion-10.0.2.tgz#edb87efb2ba39505d07f79d3ca8cc4b1cbe101bf"
+  integrity sha512-8vgx02LL7Odk/kwSGigAnlPRLJK+Dfked571ZAHGzkxPNWThkU5mQX0xPmibIMAULZehWBV7hGN7LSCpaV3cfw==
+  dependencies:
+    framesync "^6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 postcss-html@^0.36.0:
   version "0.36.0"
   resolved "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
@@ -4083,6 +4114,14 @@ style-search@^0.1.0:
   resolved "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 stylelint-config-prettier@^8.0.2:
   version "8.0.2"
   resolved "https://registry.npmjs.org/stylelint-config-prettier/-/stylelint-config-prettier-8.0.2.tgz#da9de33da4c56893cbe7e26df239a7374045e14e"