feat(avatar): improve multi-avatar management

digital-avatar-app/src/views/AuthorizationManage.vue

@@ -109,7 +109,7 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import {
   getAvatarPermissionSettings,
   getTakeoverStatus,
@@ -118,12 +118,14 @@ import {
   type TakeoverStatus,
 } from '@/api'
 import { useAvatarStore } from '@/store/avatar'
-import { pickAvatarId } from '@/utils/avatar-page-data.js'
+import { pickScopedAvatarId } from '@/utils/avatar-page-data.js'
 
 type PermissionState = Record<AvatarPermission, boolean>
 
 const router = useRouter()
+const route = useRoute()
 const avatarStore = useAvatarStore()
+const avatarId = computed(() => pickScopedAvatarId(route.params.avatarId, avatarStore.currentAvatarId, avatarStore.avatars))
 
 const permissionItems: Array<{
   key: AvatarPermission
@@ -307,7 +309,8 @@ const goCreate = () => router.push('/avatar/create')
 
 onMounted(async () => {
   if (!avatarStore.avatars.length) await avatarStore.loadAvatars()
-  activeAvatarId.value = pickAvatarId(avatarStore.currentAvatarId, avatarStore.avatars) || ''
+  activeAvatarId.value = avatarId.value || ''
+  if (activeAvatarId.value) avatarStore.currentAvatarId = activeAvatarId.value
   await loadSettings()
 })