feat(admin-web): add 404 page for unknown routes

Unknown URLs previously rendered a blank page. Add a catch-all route
under AppShell that shows the requested path plus back / workspace
actions, with zh-CN and en-US copy.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/admin-web/src/i18n/messages/en-US.ts

@@ -244,6 +244,18 @@ const enUS = {
       title: 'AI Point Usage',
       description: 'Review AI point balance, cycle rules, and recent usage records.',
     },
+    notFound: {
+      title: 'Page not found',
+      description: 'The link you opened might have moved or no longer exists.',
+    },
+  },
+  notFound: {
+    title: 'This page got lost',
+    description:
+      "We couldn't find anything at this address. The URL might be mistyped, or the page has been removed.",
+    pathLabel: 'Requested path',
+    back: 'Go back',
+    home: 'Back to workspace',
   },
   aiPoints: {
     balance: 'Available Points',

apps/admin-web/src/i18n/messages/zh-CN.ts

@@ -233,6 +233,17 @@ const zhCN = {
       title: "AI 点数明细",
       description: "查看当前套餐 AI 点数余额、周期规则和最近消耗流水。",
     },
+    notFound: {
+      title: "页面不存在",
+      description: "你访问的链接可能已经失效或被移动。",
+    },
+  },
+  notFound: {
+    title: "页面走丢了",
+    description: "我们没有找到这个地址对应的内容，可能链接拼写有误，或者页面已经下线。",
+    pathLabel: "请求路径",
+    back: "返回上一页",
+    home: "回到工作台",
   },
   aiPoints: {
     balance: "可用点数",

apps/admin-web/src/router/index.ts

@@ -262,6 +262,16 @@ const router = createRouter({
             navKey: '/account/ai-points',
           },
         },
+        {
+          path: ':pathMatch(.*)*',
+          name: 'not-found',
+          component: () => import('@/views/NotFoundView.vue'),
+          meta: {
+            titleKey: 'route.notFound.title',
+            descriptionKey: 'route.notFound.description',
+            navKey: null,
+          },
+        },
       ],
     },
   ],

apps/admin-web/src/views/NotFoundView.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import { ArrowLeftOutlined, HomeOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+
+function goBack(): void {
+  if (window.history.length > 1) {
+    router.back()
+  } else {
+    void router.replace('/workspace')
+  }
+}
+
+function goHome(): void {
+  void router.replace('/workspace')
+}
+</script>
+
+<template>
+  <section class="not-found-page" role="alert" aria-labelledby="not-found-title">
+    <div class="not-found-card">
+      <div class="ambient-glow" aria-hidden="true"></div>
+      
+      <div class="error-code" aria-hidden="true">404</div>
+      <h1 id="not-found-title" class="not-found-title">{{ t('notFound.title') }}</h1>
+      <p class="not-found-description">{{ t('notFound.description') }}</p>
+
+      <div class="not-found-path" :title="route.fullPath">
+        <span class="not-found-path-label">{{ t('notFound.pathLabel') }}</span>
+        <code>{{ route.fullPath }}</code>
+      </div>
+
+      <div class="not-found-actions">
+        <button type="button" class="btn-secondary" @click="goBack">
+          <ArrowLeftOutlined aria-hidden="true" />
+          {{ t('notFound.back') }}
+        </button>
+        <button type="button" class="btn-primary" @click="goHome">
+          <HomeOutlined aria-hidden="true" />
+          {{ t('notFound.home') }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.not-found-page {
+  min-height: calc(100vh - 140px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+}
+
+.not-found-card {
+  width: min(640px, 100%);
+  padding: 72px 48px;
+  border-radius: 32px;
+  background-color: #ffffff;
+  /* Softer dotted grid pattern */
+  background-image: radial-gradient(rgba(19, 94, 204, 0.04) 1px, transparent 1px);
+  background-size: 24px 24px;
+  background-position: center top;
+  border: 1px solid rgba(235, 240, 245, 0.8);
+  box-shadow: 
+    0 24px 48px -12px rgba(19, 94, 204, 0.05),
+    0 0 0 1px rgba(255, 255, 255, 0.8) inset;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+  animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.ambient-glow {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(circle, rgba(47, 124, 246, 0.08) 0%, rgba(255,255,255,0) 70%);
+  pointer-events: none;
+  z-index: 0;
+  border-radius: 50%;
+  filter: blur(24px);
+}
+
+.error-code {
+  position: relative;
+  z-index: 1;
+  font-size: 132px;
+  font-weight: 900;
+  line-height: 1;
+  margin-bottom: 20px;
+  /* Softer, brighter gradient for consistency with the overall app */
+  background: linear-gradient(135deg, #70a1ff 0%, #1e6fff 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  letter-spacing: -6px;
+  filter: drop-shadow(0 12px 24px rgba(30, 111, 255, 0.12));
+  animation: float 6s ease-in-out infinite;
+}
+
+@keyframes float {
+  0% { transform: translateY(0px); }
+  50% { transform: translateY(-10px); }
+  100% { transform: translateY(0px); }
+}
+
+.not-found-title {
+  position: relative;
+  z-index: 1;
+  margin: 0 0 16px;
+  font-size: 28px;
+  font-weight: 700;
+  color: #27334a;
+  letter-spacing: -0.5px;
+}
+
+.not-found-description {
+  position: relative;
+  z-index: 1;
+  margin: 0 auto 32px;
+  max-width: 420px;
+  font-size: 15px;
+  line-height: 1.6;
+  color: #64748b;
+}
+
+.not-found-path {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 18px;
+  background: #f4f6fb;
+  border-radius: 12px;
+  margin-bottom: 40px;
+  border: 1px solid rgba(19, 94, 204, 0.04);
+}
+
+.not-found-path-label {
+  font-size: 13px;
+  color: #8a96b0;
+  font-weight: 500;
+}
+
+.not-found-path code {
+  font-family:
+    'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 13px;
+  color: #334155;
+  word-break: break-all;
+  max-width: 280px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.not-found-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+}
+
+.btn-primary, .btn-secondary {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 48px;
+  padding: 0 28px;
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  border: none;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, #135ecc 0%, #0f7ad8 100%);
+  color: #ffffff;
+  box-shadow: 0 8px 20px rgba(19, 94, 204, 0.2);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(135deg, #156ae6 0%, #1186ed 100%);
+  transform: translateY(-2px);
+  box-shadow: 0 12px 24px rgba(19, 94, 204, 0.3);
+}
+
+.btn-primary:active {
+  transform: translateY(1px);
+  box-shadow: 0 4px 12px rgba(19, 94, 204, 0.15);
+}
+
+.btn-secondary {
+  background: #ffffff;
+  color: #27334a;
+  border: 1px solid #d1d5db;
+  box-shadow: 0 2px 6px rgba(15, 32, 64, 0.04);
+}
+
+.btn-secondary:hover {
+  border-color: #9ca3af;
+  color: #172033;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 12px rgba(15, 32, 64, 0.08);
+}
+
+.btn-secondary:active {
+  transform: translateY(1px);
+  box-shadow: 0 2px 4px rgba(15, 32, 64, 0.04);
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (max-width: 640px) {
+  .not-found-card {
+    padding: 48px 24px;
+    border-radius: 24px;
+  }
+  .error-code {
+    font-size: 100px;
+    letter-spacing: -4px;
+  }
+  .not-found-title {
+    font-size: 24px;
+  }
+  .not-found-actions {
+    flex-direction: column;
+  }
+  .btn-primary, .btn-secondary {
+    width: 100%;
+    justify-content: center;
+  }
+}
+</style>