Implement routes and transitions

packages/sshecret-frontend/src/views/audit/AuditPage.vue

@@ -0,0 +1,29 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="audit" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <AuditView />
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import AuditView from '@/views/audit/AuditView.vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'audit') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>

packages/sshecret-frontend/src/views/audit/AuditView.vue

@@ -2,10 +2,14 @@
   <template v-if="loaded">
     <AuditTable :auditFilter="auditFilter" />
   </template>
+  <template v-else>
+    <AuditSkeleton />
+  </template>
 </template>
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import AuditTable from '@/components/audit/AuditTable.vue'
+import AuditSkeleton from '@/components/audit/AuditSkeleton.vue'
 import type { AuditFilter } from '@/api/types'
 import type { GetAuditLogApiV1AuditGetData } from '@/client'
 import { useAuditFilterState } from '@/store/useAuditFilterState'
@@ -13,10 +17,10 @@ const auditFilterState = useAuditFilterState()
 const auditFilter = ref<GetAuditLogApiV1AuditGetData['query']>({})
 
 watch(auditFilterState, () => (auditFilter.value = auditFilterState.getFilter))
-const loaded = ref<{ boolean }>()
+const loaded = ref<{ boolean }>(false)
 
 onMounted(() => {
-  loaded.value = true
   auditFilter.value = auditFilterState.getFilter
+  loaded.value = true
 })
 </script>