实现系统管理后台 V1

client/src/views/system/RouteNotFoundView.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="th-page not-found-view">
+    <section class="th-section not-found-panel">
+      <i
+        class="pi pi-compass"
+        aria-hidden="true"
+      />
+      <h1>{{ t('notFound.title') }}</h1>
+      <p>{{ t('notFound.message') }}</p>
+      <RouterLink
+        class="primary-link"
+        :to="homePath"
+      >
+        {{ t('notFound.backHome') }}
+      </RouterLink>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+import { useAuthStore } from '@/stores/authStore'
+import { resolveAuthenticatedEntryPath } from '@/utils/authNavigation'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const homePath = computed(() => resolveAuthenticatedEntryPath(authStore.firstMenuPath))
+</script>
+
+<style scoped>
+.not-found-view {
+  max-width: 760px;
+}
+
+.not-found-panel {
+  min-height: 360px;
+  display: grid;
+  place-items: center;
+  gap: 12px;
+  padding: 56px 24px;
+  text-align: center;
+}
+
+.not-found-panel i {
+  color: var(--th-color-blue-600);
+  font-size: 34px;
+}
+
+.not-found-panel h1,
+.not-found-panel p {
+  margin: 0;
+}
+
+.not-found-panel h1 {
+  color: var(--th-color-slate-900);
+  font-size: 24px;
+}
+
+.not-found-panel p {
+  color: var(--th-color-slate-500);
+  font-size: 14px;
+}
+
+.primary-link {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-blue-600);
+  color: var(--th-color-white);
+  font-size: 13px;
+  font-weight: 800;
+  padding: 8px 14px;
+  text-decoration: none;
+}
+</style>