style: make the tab content overflow

src/pages/ContentScripts/features/repo-collection/CollectionContent/CollectionDashboard.tsx

@@ -11,6 +11,8 @@ import NumericPanel from '../charts/NumericPanel';
 import React from 'react';
 import { Row, Col } from 'antd';
 
+import './index.scss';
+
 interface CollectionDashboardProps {
   repoNames: string[];
   currentRepo?: string;
@@ -21,7 +23,7 @@ const CollectionDashboard: React.FC<CollectionDashboardProps> = ({
   currentRepo,
 }) => {
   return (
-    <div>
+    <>
       <Row gutter={[16, 16]}>
         <Col span={8}>
           <ChartCard title="Total Star Count">
@@ -80,7 +82,10 @@ const CollectionDashboard: React.FC<CollectionDashboardProps> = ({
                 />
               </ChartCard>
             </Col>
+          </Row>
 
+          <div style={{ margin: '16px 0' }}></div>
+          <Row gutter={[16, 16]}>
             <Col span={12}>
               <ChartCard title="Star Count Over Time">
                 <StackedBarChart
@@ -101,7 +106,10 @@ const CollectionDashboard: React.FC<CollectionDashboardProps> = ({
                 />
               </ChartCard>
             </Col>
+          </Row>
 
+          <div style={{ margin: '16px 0' }}></div>
+          <Row gutter={[16, 16]}>
             <Col span={24}>
               <ChartCard title="Code Line Additions/Deletions Bar Chart">
                 <CodeStackedBarChart
@@ -114,6 +122,7 @@ const CollectionDashboard: React.FC<CollectionDashboardProps> = ({
             </Col>
           </Row>
         </Col>
+
         <Col span={8}>
           <Row gutter={[16, 16]}>
             <Col span={24}>
@@ -163,7 +172,7 @@ const CollectionDashboard: React.FC<CollectionDashboardProps> = ({
           </ChartCard>
         </Col>
       </Row>
-    </div>
+    </>
   );
 };
 

src/pages/ContentScripts/features/repo-collection/CollectionContent/index.scss

@@ -0,0 +1,12 @@
+.ant-row {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.ant-col:first-child {
+  padding-left: 0 !important;
+}
+
+.ant-col:last-child {
+  padding-right: 0 !important;
+}

src/pages/ContentScripts/features/repo-collection/CollectionContent/index.tsx

@@ -39,7 +39,6 @@ const CollectionContent: React.FC<Index> = ({ repoNames, currentRepo }) => {
     <Layout
       style={{
         height: '100%',
-        padding: '18px 0',
         background: colorBgContainer,
         overflow: 'auto',
       }}
@@ -53,7 +52,7 @@ const CollectionContent: React.FC<Index> = ({ repoNames, currentRepo }) => {
           onClick={({ key }) => handleMenuClick(key)} //点击切换选中的repo
         />
       </Sider>
-      <Content style={{ paddingLeft: '24px', minHeight: 280 }}>
+      <Content style={{ margin: '4px 8px' }}>
         <CollectionDashboard repoNames={repoNames} currentRepo={selectedRepo} />
       </Content>
     </Layout>

src/pages/ContentScripts/features/repo-collection/CollectionModal/index.scss

@@ -0,0 +1,3 @@
+.ant-tabs-content-holder {
+  overflow: auto;
+}

src/pages/ContentScripts/features/repo-collection/CollectionModal/index.tsx

@@ -2,10 +2,10 @@ import { useRepoCollectionContext } from '../context';
 import CollectionEditor from './CollectionEditor';
 import CollectionContent from '../CollectionContent';
 
-import React, { useState, useEffect } from 'react';
-import { Modal, Tabs, List, Col, Row, Button } from 'antd';
+import React, { useState } from 'react';
+import { Modal, Tabs, Button } from 'antd';
 
-const { TabPane } = Tabs;
+import './index.scss';
 
 type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
 
@@ -15,7 +15,7 @@ type CollectionTabType = {
   key: string;
 };
 
-export const CollectionManageModal = () => {
+export const CollectionModal = () => {
   const {
     showCollectionModal,
     setShowCollectionModal,
@@ -52,22 +52,6 @@ export const CollectionManageModal = () => {
     </div>
   );
 
-  useEffect(() => {
-    const initialItems = allCollections.map((collection) => {
-      const repoList = allRelations
-        .filter((relation) => relation.collectionId === collection.name)
-        .map((relation) => relation.repositoryId);
-      return {
-        label: collection.name,
-        children: <CollectionContent repoNames={repoList} />,
-        key: collection.id,
-      };
-    });
-
-    setActiveKey(selectedCollection);
-    setItems(initialItems);
-  }, [showCollectionModal]);
-
   const onCreate = async (values: any, newRepoData: string[]) => {
     if (isInEditMode) {
       const updatedItems = items.map((item) => {
@@ -170,6 +154,17 @@ export const CollectionManageModal = () => {
     if (action === 'remove') remove(targetKey);
   };
 
+  const tabItems = allCollections.map((collection) => {
+    const repoList = allRelations
+      .filter((relation) => relation.collectionId === collection.name)
+      .map((relation) => relation.repositoryId);
+    return {
+      label: collection.name,
+      children: <CollectionContent repoNames={repoList} />,
+      key: collection.id,
+    };
+  });
+
   return (
     <div>
       <Modal
@@ -193,9 +188,9 @@ export const CollectionManageModal = () => {
           onChange={onChange}
           activeKey={activeKey}
           onEdit={onEdit}
-          items={items}
+          items={tabItems}
           tabBarExtraContent={editTab}
-          style={{ height: '100%', margin: '0px 24px' }}
+          style={{ height: '100%', marginRight: '24px' }}
         />
       </Modal>
       <CollectionEditor

src/pages/ContentScripts/features/repo-collection/view.tsx

@@ -1,5 +1,5 @@
 import { CollectionButton } from './CollectionButton';
-import { CollectionManageModal } from './CollectionModal';
+import { CollectionModal } from './CollectionModal';
 import { RepoCollectionProvider } from './context';
 
 import React from 'react';
@@ -12,7 +12,7 @@ const View = ({ repoName }: Props) => {
   return (
     <RepoCollectionProvider currentRepositoryId={repoName}>
       <CollectionButton />
-      <CollectionManageModal />
+      <CollectionModal />
     </RepoCollectionProvider>
   );
 };