feat: 增加前端拦截后端路由的提示

sub-store-org · Dec 14, 2023 · 37106b6 · 37106b6
1 parent fa69d99
commit 37106b6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/src/locales/en.ts b/src/locales/en.ts
@@ -56,6 +56,7 @@ export default {
   notFoundPage: {
     title: 'Oops! URL Error!',
     desc: 'Back to Home Page',
+    backendDesc: 'If you are seeing this, it is probably due to a routing interception issue on the front end of your browser. You can force a refresh to see it or use the link directly without affecting the use of this link.',
   },
   // subscription management page
   subPage: {

diff --git a/src/locales/zh.ts b/src/locales/zh.ts
@@ -56,6 +56,7 @@ export default {
   notFoundPage: {
     title: '啊哦～ URL 错误！',
     desc: '回首页',
+    backendDesc: '如果你看到这个 可能是因为浏览器前端路由拦截的问题 可以强制刷新查看或直接使用该链接 不影响此链接的使用',
   },
   // 订阅管理页
   subPage: {

diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
@@ -1,11 +1,20 @@
 <template>
   <div class="wrapper">
-    <h3>{{ $t('notFoundPage.title') }}</h3>
+
+    <h3 v-if="isBackend">
+      <p>{{ $t('notFoundPage.backendDesc') }}</p>
+    </h3>
+    <h3 v-else>{{ $t('notFoundPage.title') }}</h3>
     <router-link to="/">{{ $t('notFoundPage.desc') }}</router-link>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const isBackend = /\/(api|download)\/.+/.test(route.fullPath)
+</script>
 
 <style lang="scss" scoped>
   .wrapper {
@@ -15,9 +24,10 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
+    color: var(--primary-text-color);
 
     h3 {
-      padding-bottom: 24px;
+      padding: 0 24px 24px 24px;
     }
   }
 </style>