[UI]: Optimize table ui and deduplicate 403 login error

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()
     })
 

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

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;

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,13 +317,16 @@ export default defineComponent({
     display: flex;
     height: 100%;
     align-items: stretch;
+    margin-top: -12px;
+    margin-bottom: -12px;
   }
 
   .tables-sidebar {
     flex: 0 0 auto;
     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;
   }