perf: Optimize tabs

JerryFan626 · JerryFan626 · commit 35b81fa70c1c · 2023-11-09T21:56:18.000+08:00
diff --git a/chat2db-client/src/components/Tabs/index.less b/chat2db-client/src/components/Tabs/index.less
@@ -4,6 +4,7 @@
   background-color: var(--color-bg-subtle);
   // 添加内阴影
   box-shadow: inset 0px -1px 0px var(--color-primary);
+
   .icon {
     opacity: 1;
   }
@@ -12,6 +13,7 @@
 .tab-focus-line() {
   color: var(--color-primary);
   background-color: var(--color-bg-subtle);
+
   .icon {
     display: flex;
   }
@@ -30,6 +32,7 @@
   flex-shrink: 0;
   background-color: var(--color-bg-base);
   border-bottom: 1px solid var(--color-border);
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -38,12 +41,14 @@
 .tabsContent {
   flex: 1;
   height: 0px;
+
   .tabsContentItem {
     height: 100%;
     width: 100%;
     display: none;
     position: relative;
   }
+
   .tabsContentItemActive {
     display: block;
   }
@@ -67,19 +72,23 @@
   cursor: pointer;
   user-select: none;
   border-right: 1px solid var(--color-border);
+
   &:last-child {
     border-right: 0;
   }
+
   .textBox {
     flex: 1;
     display: flex;
     align-items: center;
   }
+
   .text {
     flex: 1;
     width: fit-content;
     .f-single-line();
   }
+
   .icon {
     flex-shrink: 0;
     display: flex;
@@ -92,18 +101,22 @@
     cursor: pointer;
     color: var(--color-text-secondary);
     opacity: 0;
+
     i {
       font-size: 12px;
     }
+
     &:hover {
       color: var(--color-primary);
       background-color: var(--color-hover-bg);
     }
   }
+
   &:hover {
     // .tab-focus();
     color: var(--color-primary);
-    .icon{
+
+    .icon {
       opacity: 1;
     }
   }
@@ -114,31 +127,33 @@
 }
 
 .rightBox {
-  flex: 1;
+  // flex: 1;
   position: sticky;
   right: 0;
   top: 0;
   bottom: 0;
   background-color: var(--color-bg-base);
-  border-left:  1px solid var(--color-border);
-  border-right:  1px solid var(--color-border);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
+  border-left: 1px solid var(--color-border);
+  border-right: 1px solid var(--color-border);
+  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
   display: flex;
 
 
 }
 
-.moreTabs{
+.moreTabs {
   width: 30px;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+
   &:hover {
     color: var(--color-primary);
   }
 
+
 }
 
 .addIcon {
@@ -148,13 +163,21 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border-left:  1px solid var(--color-border);
+  border-left: 1px solid var(--color-border);
 
   &:hover {
     color: var(--color-primary);
   }
 }
 
+.addIconDisabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+  &:hover {
+    color: var(--color-text-disabled);
+  }
+}
+
 .input {
   border: 0;
   width: 86px;
@@ -165,6 +188,7 @@
   font-weight: 400;
   background-color: var(--color-bg-subtle);
   color: var(--color-text);
+
   input:focus {
     outline: none;
   }
@@ -173,7 +197,4 @@
 .prefixIcon {
   flex-shrink: 0;
   margin-right: 4px;
-}
-
-.activeContent {
-}
+}
diff --git a/chat2db-client/src/components/Tabs/index.tsx b/chat2db-client/src/components/Tabs/index.tsx
@@ -23,6 +23,8 @@ export interface IOnchangeProps {
   data?: ITabItem;
 }
 
+const MAX_TABS = 20;
+
 interface IProps {
   className?: string;
   items?: ITabItem[];
@@ -92,7 +94,7 @@ export default memo<IProps>((props) => {
       if (activeTab) {
         setTimeout(() => {
           activeTab.scrollIntoView({ behavior: 'smooth', inline: 'start' });
-        }, 50);
+        }, 100);
       }
     }
 
@@ -136,6 +138,9 @@ export default memo<IProps>((props) => {
   };
 
   const handleAdd = () => {
+    if (internalTabs.length >= MAX_TABS) {
+      return;
+    }
     onEdit?.('add');
   };
 
@@ -260,6 +265,7 @@ export default memo<IProps>((props) => {
               <div className={styles.moreTabs}>
                 <Dropdown
                   menu={{
+                    style: { maxHeight: '200px', overflowY: 'auto' },
                     items: moreTabsMenu,
                     selectable: true,
                     selectedKeys: [`${activeKey}`],
@@ -272,7 +278,12 @@ export default memo<IProps>((props) => {
                   </a>
                 </Dropdown>
               </div>
-              <div className={styles.addIcon} onClick={handleAdd}>
+              <div
+                className={classnames(styles.addIcon, {
+                  [styles.addIconDisabled]: internalTabs.length >= MAX_TABS,
+                })}
+                onClick={handleAdd}
+              >
                 <Iconfont code="&#xe631;" />
               </div>
             </div>
diff --git a/chat2db-client/src/i18n/en-us/team.ts b/chat2db-client/src/i18n/en-us/team.ts
@@ -1,4 +1,5 @@
 export default {
+    'team.title': 'Team Management',
     'team.tab.datasource': 'DataSource Management',
     'team.tab.user': 'User Management',
     'team.tab.team': 'Team Management',
diff --git a/chat2db-client/src/i18n/zh-cn/team.ts b/chat2db-client/src/i18n/zh-cn/team.ts
@@ -1,4 +1,5 @@
 export default {
+  'team.title': '团队管理',
   'team.tab.datasource': '链接管理',
   'team.tab.user': '用户管理',
   'team.tab.team': '团队管理',
diff --git a/chat2db-client/src/pages/main/index.tsx b/chat2db-client/src/pages/main/index.tsx
@@ -130,7 +130,7 @@ function MainPage(props: IProps) {
           iconFontSize: 24,
           isLoad: false,
           component: <Team />,
-          name: '团队协作',
+          name: i18n('team.title'),
         });
         if (localStorage.getItem('curPage') === 'team') {
           setActiveNav(navConfig[3]);

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export default {`
	`2`	`+ 'team.title': 'Team Management',`
`2`	`3`	`'team.tab.datasource': 'DataSource Management',`
`3`	`4`	`'team.tab.user': 'User Management',`
`4`	`5`	`'team.tab.team': 'Team Management',`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export default {`
	`2`	`+ 'team.title': '团队管理',`
`2`	`3`	`'team.tab.datasource': '链接管理',`
`3`	`4`	`'team.tab.user': '用户管理',`
`4`	`5`	`'team.tab.team': '团队管理',`