From 10e72183d1e0711d247f24d5865a59c79cca14b5 Mon Sep 17 00:00:00 2001
From: "majin.nathan" <majin.nathan@bytedance.com>
Date: Mon, 9 Feb 2026 20:38:15 +0800
Subject: [PATCH] [UI]: Optimize table ui and deduplicate 403 login error

---
 amoro-web/src/main.ts                             | 13 ++++++++++++-
 amoro-web/src/utils/request.ts                    | 10 +++++++++-
 .../src/views/tables/components/TableExplorer.vue |  4 ++--
 amoro-web/src/views/tables/index.vue              | 15 +++++++++------
 4 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/amoro-web/src/main.ts b/amoro-web/src/main.ts
index 7cab416372..d7f8da4602 100644
--- a/amoro-web/src/main.ts
+++ b/amoro-web/src/main.ts
@@ -32,6 +32,7 @@ import './utils/editor'
 import './assets/icons'
 import loginService from './services/login.service'
 import { getQueryString } from './utils'
+import { resetLoginTip } from './utils/request'
 import SvgIcon from '@/components/svg-icon.vue'
 
 import 'virtual:svg-icons-register'
@@ -72,11 +73,21 @@ RegisterComponents(app);
   finally {
     const store = useStore()
     router.beforeEach((to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
-      // if no username in store and not go to login page, should redirect to login page
       store.setHistoryPath({
         path: from.path,
         query: from.query,
       })
+      if (to.path === '/login') {
+        resetLoginTip()
+        next()
+        return
+      }
+      if (!store.userInfo.userName && to.path !== '/login') {
+        next({
+          path: '/login',
+        })
+        return
+      }
       next()
     })
 
diff --git a/amoro-web/src/utils/request.ts b/amoro-web/src/utils/request.ts
index e60f22d857..33beff375d 100644
--- a/amoro-web/src/utils/request.ts
+++ b/amoro-web/src/utils/request.ts
@@ -22,6 +22,8 @@ import { message } from 'ant-design-vue'
 import useStore from '@/store'
 import router from '@/router'
 
+let loginTipShown = false
+
 // http://10.196.98.23:19111/
 export const baseURL = import.meta.env.PROD ? '' : (import.meta.env.MODE === 'mock' ? '/mock' : '/')
 
@@ -161,8 +163,10 @@ const request: any = function (options: CustomAxiosRequestConfig) {
         store.updateUserInfo({
           userName: '',
         })
-        if (requestConfig.handleError) {
+        const currentPath = router.currentRoute.value.path
+        if (requestConfig.handleError && currentPath !== '/login' && !loginTipShown) {
           message.error(msg || 'need login')
+          loginTipShown = true
         }
         return router.push({
           path: '/login',
@@ -259,4 +263,8 @@ export function downloadWithHeader(url: string, fileName: string = 'download', _
 }
 
 
+export function resetLoginTip() {
+  loginTipShown = false
+}
+
 export default request as WrapperRequest
diff --git a/amoro-web/src/views/tables/components/TableExplorer.vue b/amoro-web/src/views/tables/components/TableExplorer.vue
index fdc528c41a..96740e9de7 100755
--- a/amoro-web/src/views/tables/components/TableExplorer.vue
+++ b/amoro-web/src/views/tables/components/TableExplorer.vue
@@ -618,7 +618,7 @@ onBeforeMount(async () => {
   flex-direction: column;
 
   .table-explorer-header {
-    padding: 0 12px;
+    padding: 0 7px 0 8px;
     margin-bottom: 8px;
 
     .search-input {
@@ -656,7 +656,7 @@ onBeforeMount(async () => {
     flex: 1;
     min-height: 0;
     overflow: auto;
-    padding: 0 12px;
+    padding: 0 7px 0 8px;
 
     :deep(.ant-tree) {
       background-color: #fff;
diff --git a/amoro-web/src/views/tables/index.vue b/amoro-web/src/views/tables/index.vue
index 51ad9abe31..f3704dbe23 100644
--- a/amoro-web/src/views/tables/index.vue
+++ b/amoro-web/src/views/tables/index.vue
@@ -52,7 +52,7 @@ export default defineComponent({
     const SIDEBAR_WIDTH_STORAGE_KEY = 'tables_sidebar_width'
     const SIDEBAR_MIN_WIDTH = 320
     const SIDEBAR_MAX_WIDTH = 800
-    const sidebarWidth = ref(512)
+    const sidebarWidth = ref(320)
 
     let isResizing = false
     let startX = 0
@@ -71,7 +71,7 @@ export default defineComponent({
     const initSidebarWidth = () => {
       const stored = localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY)
       const parsed = stored ? Number.parseInt(stored, 10) : Number.NaN
-      const base = Number.isFinite(parsed) ? clampSidebarWidth(parsed) : 512
+      const base = Number.isFinite(parsed) ? clampSidebarWidth(parsed) : 320
       sidebarWidth.value = base
       startWidth = base
     }
@@ -317,6 +317,8 @@ export default defineComponent({
     display: flex;
     height: 100%;
     align-items: stretch;
+    margin-top: -12px;
+    margin-bottom: -12px;
   }
 
   .tables-sidebar {
@@ -324,6 +326,7 @@ export default defineComponent({
     height: 100%;
     background-color: #fff;
     position: relative;
+    padding-top: 12px;
   }
 
   .tables-main {
@@ -332,12 +335,13 @@ export default defineComponent({
     flex-direction: column;
     min-width: 0;
     height: 100%;
+    padding-top: 12px;
   }
 
   .tables-divider {
     position: relative;
-    flex: 0 0 8px;
-    width: 8px;
+    flex: 0 0 5px;
+    width: 5px;
     height: 100%;
     cursor: col-resize;
     z-index: 2; // Ensure divider is above sidebar and main content so drag area is not blocked
@@ -348,9 +352,8 @@ export default defineComponent({
     position: absolute;
     top: 0;
     bottom: 0;
-    left: 50%;
+    right: 2px;
     width: 1px;
-    transform: translateX(-50%);
     background: #e8e8f0;
   }