feat: add animation for user profile route

package.json

@@ -37,7 +37,8 @@
     "vue": "^3.2.37",
     "vue-filepond": "^7.0.3",
     "vue-grid-layout": "3.0.0-beta1",
-    "vue-router": "^4.0.16"
+    "vue-router": "^4.0.16",
+    "vue-starport": "^0.3.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.3",

pnpm-lock.yaml

@@ -51,6 +51,7 @@ importers:
       vue-filepond: ^7.0.3
       vue-grid-layout: 3.0.0-beta1
       vue-router: ^4.0.16
+      vue-starport: ^0.3.0
       vue-tsc: ^0.34.17
     dependencies:
       '@halo-dev/admin-api': 1.1.0
@@ -66,6 +67,7 @@ importers:
       vue-filepond: 7.0.3_filepond@4.30.4+vue@3.2.37
       vue-grid-layout: 3.0.0-beta1
       vue-router: 4.0.16_vue@3.2.37
+      vue-starport: 0.3.0
     devDependencies:
       '@rushstack/eslint-patch': 1.1.3
       '@tailwindcss/aspect-ratio': 0.4.0_tailwindcss@3.1.3
@@ -6962,6 +6964,15 @@ packages:
       '@vue/devtools-api': 6.1.4
       vue: 3.2.37
 
+  /vue-starport/0.3.0:
+    resolution: {integrity: sha512-CfwYVxJDFqj7zoDw0TAMdNdpefuTdUH3rtupsadSa1je5Z7S/XwUCdxN0vVjBEEvWh33HmqjdK0IRQMWDlV7VQ==}
+    dependencies:
+      '@vueuse/core': 8.6.0_vue@3.2.37
+      vue: 3.2.37
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /vue-tsc/0.34.17_typescript@4.7.3:
     resolution: {integrity: sha512-jzUXky44ZLHC4daaJag7FQr3idlPYN719/K1eObGljz5KaS2UnVGTU/XSYCd7d6ampYYg4OsyalbHyJIxV0aEQ==}
     hasBin: true

src/App.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import { RouterView } from "vue-router";
+import { StarportCarrier } from "vue-starport";
 </script>
 
 <template>
-  <RouterView />
+  <StarportCarrier>
+    <RouterView />
+  </StarportCarrier>
 </template>
 
 <style lang="scss">
@@ -11,6 +14,7 @@ body {
   overflow-y: overlay;
   background: #eff4f9;
 }
+
 *,
 *::before,
 *::after {

src/layouts/UserProfileLayout.vue

@@ -4,6 +4,7 @@ import { IconUpload, VButton, VTabbar } from "@halo-dev/components";
 import { onMounted, provide, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { users } from "@/modules/system/users/users-mock";
+import { Starport } from "vue-starport";
 
 const tabs = [
   {
@@ -65,11 +66,17 @@ const handleTabChange = (id: string) => {
       <div class="px-4 sm:px-6 lg:px-8">
         <div class="-mt-12 flex items-end space-x-5 sm:-mt-16">
           <div class="flex">
-            <img
-              :src="user.avatar"
-              alt="Avatar"
-              class="h-24 w-24 rounded-full ring-4 ring-white drop-shadow-lg sm:h-32 sm:w-32"
-            />
+            <Starport
+              :port="`user-profile-${user.name}`"
+              class="h-24 w-24 sm:h-32 sm:w-32"
+              :duration="400"
+            >
+              <img
+                :src="user.avatar"
+                alt="Avatar"
+                class="rounded-full ring-4 ring-white drop-shadow-lg"
+              />
+            </Starport>
           </div>
           <div
             class="mt-6 sm:flex sm:min-w-0 sm:flex-1 sm:items-center sm:justify-end sm:space-x-6 sm:pb-1"

src/modules/system/users/UserList.vue

@@ -15,6 +15,7 @@ import {
 import { users } from "./users-mock";
 import { useRouter } from "vue-router";
 import { ref } from "vue";
+import { Starport } from "vue-starport";
 
 const checkAll = ref(false);
 
@@ -192,15 +193,17 @@ const handleRouteToDetail = (username: string) => {
                 />
               </div>
               <div v-if="user.avatar" class="mr-4">
-                <div
-                  class="h-12 w-12 overflow-hidden rounded border bg-white hover:shadow-sm"
+                <Starport
+                  :duration="400"
+                  :port="`user-profile-${user.name}`"
+                  class="h-12 w-12"
                 >
                   <img
                     :alt="user.name"
                     :src="user.avatar"
-                    class="h-full w-full"
+                    class="h-full w-full overflow-hidden rounded border bg-white hover:shadow-sm"
                   />
-                </div>
+                </Starport>
               </div>
               <div class="flex-1">
                 <div class="flex flex-row items-center">