fix right sider open position error (DataLinkDC#2291)

* fix right sider open position error Signed-off-by: Licho <[email protected]> * Spotless Apply * feat: reverse bottom sider item Signed-off-by: Licho <[email protected]> * refactor Signed-off-by: Licho <[email protected]> * refactor Signed-off-by: Licho <[email protected]> * Spotless Apply * refactor: left sider heigh process Signed-off-by: Licho <[email protected]> * Spotless Apply * refactor: remove redundent width Signed-off-by: Licho <[email protected]> * Spotless Apply * fx Signed-off-by: Licho <[email protected]> --------- Signed-off-by: Licho <[email protected]> Co-authored-by: leechor <[email protected]>
aiwenmo · Sep 6, 2023 · 881052c · 881052c
1 parent 77aca80
commit 881052c
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 139 deletions.
diff --git a/dinky-web/src/pages/DataStudio/RightContainer/index.tsx b/dinky-web/src/pages/DataStudio/RightContainer/index.tsx
@@ -65,7 +65,7 @@ const RightContainer: React.FC<RightContainerProps> = (prop: any) => {
       minWidth={300}
       maxWidth={maxWidth}
       enable={{ left: true }}
-      style={{ borderInlineStart: '1px solid ' + themeValue.borderColor }}
+      style={{ borderInlineStart: `1px solid ${themeValue.borderColor}` }}
     >
       {tabs.panes.length > 0 ? (
         <Tabs

diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx
@@ -25,7 +25,7 @@ import {
   isDataStudioTabsItemType,
   mapDispatchToProps
 } from '@/pages/DataStudio/function';
-import HeaderContainer from '@/pages/DataStudio/HeaderContainer';
+import SecondHeaderContainer from '@/pages/DataStudio/HeaderContainer';
 import LeftContainer from '@/pages/DataStudio/LeftContainer';
 import { getDataBase } from '@/pages/DataStudio/LeftContainer/MetaData/service';
 import { getTaskData, getTaskDetails } from '@/pages/DataStudio/LeftContainer/Project/service';
@@ -56,20 +56,7 @@ const { Text } = Typography;
 const { Sider, Content } = Layout;
 
 const { useToken } = theme;
-const format = (percent?: number, successPercent?: number) => (
-  <div style={{ position: 'relative', height: '100%' }}>
-    <div
-      style={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)'
-      }}
-    >
-      {`${percent}%`}
-    </div>
-  </div>
-);
+
 const DataStudio = (props: any) => {
   const {
     bottomContainer,
@@ -194,23 +181,6 @@ const DataStudio = (props: any) => {
     onResize();
   }, []);
 
-  /**
-   * 渲染头部
-   */
-  const renderHeaderContainer = () => (
-    <HeaderContainer size={size} activeBreadcrumbTitle={activeBreadcrumbTitle} />
-  );
-
-  /**
-   * 渲染左侧侧边栏
-   */
-  const renderLeftContainer = () => <LeftContainer size={size} />;
-
-  /**
-   * 渲染右侧侧边栏
-   */
-  const renderRightContainer = () => <RightContainer size={size} bottomHeight={bottomHeight} />;
-
   const updateTabContent = () => {
     const currentTab = getCurrentTab(tabs.panes, tabs.activeKey);
     if (!isDataStudioTabsItemType(currentTab)) {
@@ -226,85 +196,101 @@ const DataStudio = (props: any) => {
 
   const access = useAccess();
 
+  const LeftTopMenu = (
+    <Menu
+      mode='inline'
+      selectedKeys={[leftContainer.selectKey]}
+      items={LeftSide.filter((x) => AuthorizedObject({ path: x.auth, children: x, access })).map(
+        (x) => ({
+          key: x.key,
+          label: x.label,
+          icon: x.icon
+        })
+      )}
+      style={{
+        flexGrow: 1,
+        borderBlockStart: `1px solid ${themeValue.borderColor}`,
+        borderInlineEnd: `1px solid ${themeValue.borderColor}`
+      }}
+      onClick={(item) => updateSelectLeftKey(item.key === leftContainer.selectKey ? '' : item.key)}
+    />
+  );
+
+  const LeftBottomMenu = (
+    <Menu
+      mode='inline'
+      selectedKeys={[bottomContainer.selectKey]}
+      items={LeftBottomSide.filter((x) =>
+        AuthorizedObject({ path: x.auth, children: x, access })
+      ).map((x) => ({
+        key: x.key,
+        label: x.label,
+        icon: x.icon
+      }))}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-end',
+        borderInlineEnd: `1px solid ${themeValue.borderColor}`
+      }}
+      onClick={(item) => {
+        updateSelectBottomKey(item.key === bottomContainer.selectKey ? '' : item.key);
+        if (
+          bottomContainer.selectKey !== '' &&
+          !bottomContainer.selectSubKey[item.key] &&
+          LeftBottomMoreTabs[item.key]
+        ) {
+          updateSelectBottomSubKey(LeftBottomMoreTabs[item.key][0].key);
+        }
+      }}
+    />
+  );
+
+  const RightTopMenu = (
+    <Menu
+      selectedKeys={[rightContainer.selectKey]}
+      mode='inline'
+      style={{
+        height: '100%',
+        borderInlineStart: `1px solid ${themeValue.borderColor}`,
+        borderBlockStart: `1px solid ${themeValue.borderColor}`
+      }}
+      items={RightSide.filter((x) => AuthorizedObject({ path: x.auth, children: x, access }))
+        .filter((x) => {
+          if (!x.isShow) {
+            return true;
+          }
+          if (parseInt(tabs.activeKey) < 0) {
+            return TabsPageType.None;
+          }
+          const v = (tabs.panes as TabsItemType[]).find((item) => item.key === tabs.activeKey);
+          return x.isShow(v?.type ?? TabsPageType.None, v?.subType);
+        })
+        .map((x) => {
+          return { key: x.key, label: x.label, icon: x.icon };
+        })}
+      onClick={(item) =>
+        updateSelectRightKey(item.key === rightContainer.selectKey ? '' : item.key)
+      }
+    />
+  );
+
   return (
     <PageContainer title={false} breadcrumb={{ style: { display: 'none' } }}>
       <PersistGate loading={null} persistor={persist}>
-        <div style={{ marginInline: -10, marginBlock: -5 }}>
-          {/* 渲染 header */}
-          {renderHeaderContainer()}
+        <div style={{ marginInline: -10, width: size.width }}>
+          <SecondHeaderContainer size={size} activeBreadcrumbTitle={activeBreadcrumbTitle} />
           <Layout hasSider style={{ minHeight: size.contentHeight, paddingInline: 0 }}>
-            {/*渲染左侧侧边栏*/}
             <Sider collapsed collapsedWidth={40}>
-              <Menu
-                mode='inline'
-                selectedKeys={[leftContainer.selectKey]}
-                items={LeftSide.filter((x) =>
-                  AuthorizedObject({ path: x.auth, children: x, access })
-                ).map((x) => ({
-                  key: x.key,
-                  label: x.label,
-                  icon: x.icon
-                }))}
-                style={{
-                  height: '50%',
-                  borderBlockStart: `1px solid ${themeValue.borderColor}`,
-                  borderInlineEnd: `1px solid ${themeValue.borderColor}`
-                }}
-                onClick={(item) =>
-                  updateSelectLeftKey(item.key === leftContainer.selectKey ? '' : item.key)
-                }
-              />
-
-              {/*底部菜单*/}
-              <Menu
-                mode='inline'
-                selectedKeys={[bottomContainer.selectKey]}
-                items={LeftBottomSide.filter((x) =>
-                  AuthorizedObject({ path: x.auth, children: x, access })
-                ).map((x) => ({
-                  key: x.key,
-                  label: x.label,
-                  icon: x.icon
-                }))}
-                style={{
-                  display: 'flex',
-                  height: '50%',
-                  flexDirection: 'column-reverse',
-                  borderInlineEnd: `1px solid ${themeValue.borderColor}`
-                }}
-                onClick={(item) => {
-                  updateSelectBottomKey(item.key === bottomContainer.selectKey ? '' : item.key);
-                  if (
-                    bottomContainer.selectKey !== '' &&
-                    !bottomContainer.selectSubKey[item.key] &&
-                    LeftBottomMoreTabs[item.key]
-                  ) {
-                    updateSelectBottomSubKey(LeftBottomMoreTabs[item.key][0].key);
-                  }
-                }}
-              />
+              <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+                {LeftTopMenu}
+                {LeftBottomMenu}
+              </div>
             </Sider>
 
-            <Content
-              style={{
-                flexDirection: 'column-reverse',
-                display: 'flex',
-                height: size.contentHeight
-              }}
-            >
-              {/*渲染底部内容*/}
-              {<BottomContainer size={size} />}
-
-              <div
-                style={{
-                  display: 'flex',
-                  position: 'absolute',
-                  top: VIEW.headerHeight,
-                  width: size.width - VIEW.sideWidth * 2
-                }}
-              >
-                {renderLeftContainer()}
-
+            <Content style={{ display: 'flex', flexDirection: 'column' }}>
+              <div style={{ display: 'flex' }}>
+                <LeftContainer size={size} />
                 <Content
                   style={{
                     width:
@@ -313,46 +299,15 @@ const DataStudio = (props: any) => {
                 >
                   <MiddleContainer />
                 </Content>
-
-                {renderRightContainer()}
+                <RightContainer size={size} bottomHeight={bottomHeight} />
               </div>
+              {<BottomContainer size={size} />}
             </Content>
 
-            {/* 渲染右侧侧边栏 */}
             <Sider collapsed collapsedWidth={40}>
-              <Menu
-                selectedKeys={[rightContainer.selectKey]}
-                mode='inline'
-                style={{
-                  height: '100%',
-                  borderInlineStart: `1px solid ${themeValue.borderColor}`,
-                  borderBlockStart: `1px solid ${themeValue.borderColor}`
-                }}
-                items={RightSide.filter((x) =>
-                  AuthorizedObject({ path: x.auth, children: x, access })
-                )
-                  .filter((x) => {
-                    if (!x.isShow) {
-                      return true;
-                    }
-                    if (parseInt(tabs.activeKey) < 0) {
-                      return TabsPageType.None;
-                    }
-                    const v = (tabs.panes as TabsItemType[]).find(
-                      (item) => item.key === tabs.activeKey
-                    );
-                    return x.isShow(v?.type ?? TabsPageType.None, v?.subType);
-                  })
-                  .map((x) => {
-                    return { key: x.key, label: x.label, icon: x.icon };
-                  })}
-                onClick={(item) =>
-                  updateSelectRightKey(item.key === rightContainer.selectKey ? '' : item.key)
-                }
-              />
+              {RightTopMenu}
             </Sider>
           </Layout>
-          {/* 页脚 */}
           {<FooterContainer token={token} />}
         </div>
       </PersistGate>