perf: 页面跳转优化 #2227

TencentBlueKing · Jul 19, 2023 · 9691ac0 · 9691ac0
1 parent fc1df29
commit 9691ac0
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 12 deletions.
diff --git a/src/frontend/src/components/app-select/index.vue b/src/frontend/src/components/app-select/index.vue
@@ -40,7 +40,7 @@
         <input
           class="app-name"
           readonly
-          :value="`${scopeName} (${scopeId})`"
+          :value="scopeId ? `${scopeName} (${scopeId})` : ''"
           @keydown.down.prevent="handleStep('next')"
           @keydown.enter.prevent="handleSelect"
           @keydown.up.prevent="handleStep('prev')">

diff --git a/src/frontend/src/domain/service/app-manage.js b/src/frontend/src/domain/service/app-manage.js
@@ -37,7 +37,7 @@ export default {
   },
   fetchWholeAppList() {
     return AppManageSource.getWholeAppList()
-      .then(({ data }) => Object.freeze(data));
+      .then(({ data }) => data);
   },
   favorApp(params) {
     return AppManageSource.updateFavorApp(params)

diff --git a/src/frontend/src/main.js b/src/frontend/src/main.js
@@ -23,6 +23,7 @@
  * IN THE SOFTWARE.
 */
 
+import _ from 'lodash';
 import Vue from 'vue';
 
 import createRouter from '@router';
@@ -139,14 +140,16 @@ entryTask.add((context) => {
 entryTask.add(context => AppService.fetchWholeAppList().then((data) => {
   context.appList = data.data;
   if (!context.scopeType || !context.scopeId) {
-    const [
-      {
+    // 没有指定业务，默认选择第一个有权限的业务
+    const firstHasPermissionApp = _.find([...context.appList], item => item.hasPermission);
+    if (firstHasPermissionApp) {
+      const  {
         scopeType,
         scopeId,
-      },
-    ] = data.data;
-    context.scopeType = scopeType;
-    context.scopeId = scopeId;
+      } = firstHasPermissionApp;
+      context.scopeType = scopeType;
+      context.scopeId = scopeId;
+    }
   }
 }));
 

diff --git a/src/frontend/src/router/index.js b/src/frontend/src/router/index.js
@@ -80,6 +80,8 @@ export default ({ appList, isAdmin, scopeType, scopeId }) => {
   // scope 是有有权限查看
   let hasScopePermission = false;
 
+  const noScope = !scopeType && !scopeId;
+
   const appInfo = appList.find(_ => _.scopeType === scopeType && _.scopeId === scopeId);
   // scope 存在于业务列表中——有效的 scope
   if (appInfo) {
@@ -106,7 +108,7 @@ export default ({ appList, isAdmin, scopeType, scopeId }) => {
       children: systemManageRoute,
     },
     {
-      path: `/${scopeType}/${scopeId}`,
+      path: noScope ? '/' : `/${scopeType}/${scopeId}`,
       component: Entry,
       redirect: {
         name: 'home',
@@ -141,10 +143,10 @@ export default ({ appList, isAdmin, scopeType, scopeId }) => {
     },
   ];
 
-  if (!isValidScope) {
-    renderPageWithComponent(routes[1], NotFound);
-  } else if (!hasScopePermission) {
+  if (noScope || !hasScopePermission) {
     renderPageWithComponent(routes[1], BusinessPermission);
+  } else if (!isValidScope) {
+    renderPageWithComponent(routes[1], NotFound);
   }
 
   // admin用户拥有系统设置功能

diff --git a/src/frontend/src/views/404.vue b/src/frontend/src/views/404.vue
@@ -31,8 +31,53 @@
       alt=""
       src="/static/images/404.png">
     <p>{{ $t('没找到页面！') }}</p>
+    <div>
+      <p v-if="$i18n.locale === 'en-US'">
+        The page you are trying to access does not exist, will redirect to
+        <router-link :to="{ name: 'home' }">
+          Homepage
+        </router-link>
+        in
+        <span style="font-weight: bold;">{{ timeout }}</span>
+        seconds.
+      </p>
+      <p v-else>
+        <span>你访问的页面不存在，将在</span>
+        <span style="font-weight: bold;">{{ timeout }}</span>
+        <span>秒后重定向到</span>
+        <router-link :to="{ name: 'home' }">
+          首页
+        </router-link>
+        <span>。</span>
+      </p>
+    </div>
   </div>
 </template>
+<script>
+  export default {
+    data() {
+      return {
+        timeout: 4,
+      };
+    },
+    created() {
+      this.goHome();
+    },
+    methods: {
+      goHome() {
+        if (this.timeout === 1) {
+          this.$router.replace({
+            name: 'home',
+          });
+          return;
+        }
+        this.timeout = this.timeout - 1;
+        setTimeout(this.goHome, 1000);
+      },
+    },
+  };
+</script>
+
 <style scoped lang="postcss">
   .exception-box {
     margin: auto;