This is an automated email from the ASF dual-hosted git repository.
lzljs3620320 pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new 1f6f314 Optimize style layout (#18)
1f6f314 is described below
commit 1f6f314ddcb643f5cdf8deb17ce5464eb95d2e03
Author: s7monk <[email protected]>
AuthorDate: Thu Aug 3 10:18:29 2023 +0800
Optimize style layout (#18)
---
paimon-web-ui/package.json | 8 ++--
paimon-web-ui/src/app/App.less | 5 ---
.../src/components/Dropdown/CatalogDropdown.tsx | 5 ++-
paimon-web-ui/src/pages/Layout/index.tsx | 10 ++---
.../Layout/{index.less => layout.module.less} | 6 ++-
.../src/pages/Metadata/LeftContent/index.tsx | 39 -------------------
.../CatalogTree/catalog-tree.module.less} | 14 +++----
.../LeftContent/components}/CatalogTree/index.tsx | 9 +----
.../components/LeftContent}/index.tsx | 18 +++++----
.../LeftContent/left-content.module.less} | 23 +++++------
.../components/MainContent}/Table/index.tsx | 0
.../{ => components}/RightContent/index.tsx | 5 ++-
.../RightContent/right-content.module.less} | 7 +++-
paimon-web-ui/src/pages/Metadata/index.tsx | 15 ++++----
.../index.tsx => Metadata/metadata.module.less} | 14 +++----
.../src/pages/Playground/RightContent/index.tsx | 45 ----------------------
.../RightContent/components}/BottomPanel/index.tsx | 0
.../components}/TopPanel/Tab/index.tsx | 0
.../RightContent/components}/TopPanel/index.tsx | 2 +-
.../RightContent}/index.tsx | 21 +++++-----
.../RightContent/right-content.module.less} | 14 +++----
.../TabMenuSidebar/components}/SiderTab/index.tsx | 26 ++++++-------
.../components/SiderTab/siderbar.module.less} | 14 +++----
.../components}/TreeComponent/index.tsx | 10 ++---
.../TreeComponent/tree-component.module.less} | 12 +++---
.../{ => components}/TabMenuSidebar/index.tsx | 11 ++----
.../TabMenuSidebar/tab-menu-sidebar.module.less} | 16 ++++----
paimon-web-ui/src/pages/Playground/index.tsx | 17 ++++----
.../index.tsx => playground.module.less} | 15 ++++----
paimon-web-ui/src/router/index.tsx | 2 +-
paimon-web-ui/vite.config.ts | 4 ++
31 files changed, 141 insertions(+), 246 deletions(-)
diff --git a/paimon-web-ui/package.json b/paimon-web-ui/package.json
index ef665fa..e9ef617 100644
--- a/paimon-web-ui/package.json
+++ b/paimon-web-ui/package.json
@@ -12,13 +12,15 @@
"dependencies": {
"@douyinfe/semi-icons": "^2.38.1",
"@douyinfe/semi-ui": "^2.38.1",
+ "@monaco-editor/react": "^4.5.1",
+ "@semi-bot/semi-theme-doucreator": "^1.0.18",
+ "@semi-bot/semi-theme-figma": "^0.1.6",
"less": "^4.1.3",
- "monaco-editor": "^0.39.0",
+ "monaco-editor": "^0.40.0",
"react": "^18.2.0",
"react-bootstrap": "^2.8.0",
"react-dom": "^18.2.0",
- "react-icons": "^4.10.1",
- "@monaco-editor/react": "^4.5.1"
+ "react-icons": "^4.10.1"
},
"devDependencies": {
"@types/node": "^20.3.2",
diff --git a/paimon-web-ui/src/app/App.less b/paimon-web-ui/src/app/App.less
index 2b1d32d..aa5443c 100644
--- a/paimon-web-ui/src/app/App.less
+++ b/paimon-web-ui/src/app/App.less
@@ -27,9 +27,4 @@ body,
--semi-color-primary: rgba(var(--semi-grey-6), 1);
--semi-color-primary-hover: rgba(var(--semi-violet-3), 1);
--semi-color-primary-light-default: rgba(var(--semi-color-bg-0), 1);
- .flex-between {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
}
diff --git a/paimon-web-ui/src/components/Dropdown/CatalogDropdown.tsx
b/paimon-web-ui/src/components/Dropdown/CatalogDropdown.tsx
index be24fa7..722c206 100644
--- a/paimon-web-ui/src/components/Dropdown/CatalogDropdown.tsx
+++ b/paimon-web-ui/src/components/Dropdown/CatalogDropdown.tsx
@@ -17,7 +17,7 @@ under the License. */
import {Select} from '@douyinfe/semi-ui';
import React from "react";
-import {CataLog} from "@pages/Playground/TabMenuSidebar/SiderTab";
+import {CataLog} from
"@pages/Playground/components/TabMenuSidebar/components/SiderTab";
import {IconRefresh} from "@douyinfe/semi-icons";
/**
@@ -63,8 +63,9 @@ const CatalogDropdown: React.FC<CatalogDropdownProps> =
(props) => {
suffix={<IconRefresh onClick={reloadCatalogListCallBack}
title={"Refresh"} spin={reLoadCatalog}/>}
loading={reLoadCatalog} onChange={handleCatalogChange}
placeholder="Select Catalog"
- style={{ width: '18vw', backgroundColor: "rgba(0, 0, 0, 0.08)" }}
optionList={renderCatalogList()}
+ optionList={renderCatalogList()}
showClear
+ style={{display: "flex", flexGrow: 1, backgroundColor:
"var(--semi-color-bg-0)"}}
/>
</>
}
diff --git a/paimon-web-ui/src/pages/Layout/index.tsx
b/paimon-web-ui/src/pages/Layout/index.tsx
index e8bf7e8..4c9ee53 100644
--- a/paimon-web-ui/src/pages/Layout/index.tsx
+++ b/paimon-web-ui/src/pages/Layout/index.tsx
@@ -16,8 +16,9 @@ specific language governing permissions and limitations
under the License. */
import { Layout } from "@douyinfe/semi-ui";
-import Header from "./header";
+import Header from "@pages/Layout/Header";
import { Outlet } from 'react-router-dom';
+import styles from "./layout.module.less";
const { Content } = Layout
@@ -27,12 +28,7 @@ const LayoutRoot = () => {
<Header/>
<Layout>
{/*<Sider/>*/}
- <Content
- style={{
- padding: '24px',
- backgroundColor: 'var(--semi-color-bg-0)',
- }}
- >
+ <Content className={styles.content}>
<Outlet />
</Content>
</Layout>
diff --git a/paimon-web-ui/src/pages/Layout/index.less
b/paimon-web-ui/src/pages/Layout/layout.module.less
similarity index 90%
copy from paimon-web-ui/src/pages/Layout/index.less
copy to paimon-web-ui/src/pages/Layout/layout.module.less
index 5a2bad5..3eab7ce 100644
--- a/paimon-web-ui/src/pages/Layout/index.less
+++ b/paimon-web-ui/src/pages/Layout/layout.module.less
@@ -13,4 +13,8 @@ software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
-under the License. */
\ No newline at end of file
+under the License. */
+
+.content {
+ background-color: var(--semi-color-bg-0);
+}
\ No newline at end of file
diff --git a/paimon-web-ui/src/pages/Metadata/LeftContent/index.tsx
b/paimon-web-ui/src/pages/Metadata/LeftContent/index.tsx
deleted file mode 100644
index a57c3dc..0000000
--- a/paimon-web-ui/src/pages/Metadata/LeftContent/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License. */
-
-import { IconPlus, IconArticle } from "@douyinfe/semi-icons";
-import CatalogTree from "@pages/Metadata/LeftContent/CatalogTree";
-import {Divider} from "@douyinfe/semi-ui";
-
-const MetadataSidebar = () => {
- return(
- <div id={"d1"} style={{display: "flex", flexWrap: "wrap", width:
"380px", height: "100%", flexFlow: "1",
- marginLeft: "30px"}}>
- <div id={"d2"} style={{width: "100%",display: "flex", alignItems:
"center", height: "40px",color: "var(--semi-color-text-0)"}}>
- <IconArticle style={{ marginLeft: "6px"}}/>
- <span style={{marginLeft: "10px"}}>Catalog Directory</span>
- <IconPlus style={{marginLeft: "113px"}}/>
- </div>
- <Divider layout="horizontal" margin='50px' style={{position:
'fixed', width: "360px", marginLeft: "-30px"}}/>
- <div id={"d3"} style={{width: "100%",display: "flex",height:
"calc(100% - 60px)", marginTop: "22px"}}>
- <CatalogTree/>
- </div>
- </div>
- )
-}
-
-export default MetadataSidebar;
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Metadata/components/LeftContent/components/CatalogTree/catalog-tree.module.less
similarity index 85%
copy from paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
copy to
paimon-web-ui/src/pages/Metadata/components/LeftContent/components/CatalogTree/catalog-tree.module.less
index ee4772f..9f178b6 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
+++
b/paimon-web-ui/src/pages/Metadata/components/LeftContent/components/CatalogTree/catalog-tree.module.less
@@ -15,12 +15,8 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-const BottomPanel = () => {
- return(
- <div>
- <div></div>
- </div>
- )
-}
-
-export default BottomPanel;
+.catalog-tree-input {
+ background-color: var(--semi-color-bg-0);
+ width: 347px;
+ margin-left: -12px;
+}
\ No newline at end of file
diff --git a/paimon-web-ui/src/pages/Metadata/LeftContent/CatalogTree/index.tsx
b/paimon-web-ui/src/pages/Metadata/components/LeftContent/components/CatalogTree/index.tsx
similarity index 95%
rename from paimon-web-ui/src/pages/Metadata/LeftContent/CatalogTree/index.tsx
rename to
paimon-web-ui/src/pages/Metadata/components/LeftContent/components/CatalogTree/index.tsx
index 1a6a2d6..cc61ee8 100644
--- a/paimon-web-ui/src/pages/Metadata/LeftContent/CatalogTree/index.tsx
+++
b/paimon-web-ui/src/pages/Metadata/components/LeftContent/components/CatalogTree/index.tsx
@@ -17,6 +17,7 @@ under the License. */
import {Input, Tree} from '@douyinfe/semi-ui';
import { IconSearch } from "@douyinfe/semi-icons";
+import styles from "./catalog-tree.module.less"
const CatalogTree = () => {
const treeData = [
@@ -126,11 +127,6 @@ const CatalogTree = () => {
}
];
- const style = {
- width: '18vw',
- height: '100%',
- };
-
const renderLabel = (x: any) => {
const className = x.className;
const onExpand = x.onExpand;
@@ -158,10 +154,9 @@ const CatalogTree = () => {
treeData={treeData}
searchPlaceholder={"Filter"}
searchRender={({ prefix, ...restProps }) => (
- <Input suffix={<IconSearch />} {...restProps} style={{ width:
'15vw', marginLeft: '-12px'}}></Input>
+ <Input suffix={<IconSearch
className={styles['catalog-tree-input-icon']}/>} {...restProps}
className={styles['catalog-tree-input']}></Input>
)}
renderFullLabel={renderLabel}
- style={style}
/>
)
}
diff --git a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
b/paimon-web-ui/src/pages/Metadata/components/LeftContent/index.tsx
similarity index 63%
copy from paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
copy to paimon-web-ui/src/pages/Metadata/components/LeftContent/index.tsx
index d6870b0..b2a016c 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
+++ b/paimon-web-ui/src/pages/Metadata/components/LeftContent/index.tsx
@@ -15,16 +15,20 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import PlaygroundRightHeaderTab from
"@pages/Playground/RightContent/TopPanel/Tab";
+import { IconPlus } from "@douyinfe/semi-icons";
+import CatalogTree from
"@pages/Metadata/components/LeftContent/components/CatalogTree";
+import styles from "./left-content.module.less";
-const TopPanel = () => {
+const MetadataSidebar = () => {
return(
- <div>
- <span>
- <PlaygroundRightHeaderTab/>
- </span>
+ <div className={styles.container}>
+ <div className={styles['add-catalog-container']}>
+ <span>Catalog</span>
+ <IconPlus/>
+ </div>
+ <CatalogTree/>
</div>
)
}
-export default TopPanel;
+export default MetadataSidebar;
diff --git a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
b/paimon-web-ui/src/pages/Metadata/components/LeftContent/left-content.module.less
similarity index 74%
copy from paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
copy to
paimon-web-ui/src/pages/Metadata/components/LeftContent/left-content.module.less
index d6870b0..bcee825 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
+++
b/paimon-web-ui/src/pages/Metadata/components/LeftContent/left-content.module.less
@@ -15,16 +15,17 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import PlaygroundRightHeaderTab from
"@pages/Playground/RightContent/TopPanel/Tab";
-
-const TopPanel = () => {
- return(
- <div>
- <span>
- <PlaygroundRightHeaderTab/>
- </span>
- </div>
- )
+.container {
+ width: 347px;
+ height: 100%;
+ padding: 10px 24px;
}
-export default TopPanel;
+.add-catalog-container {
+ color: var(--semi-color-text-0);
+ margin: 6px 0 16px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
\ No newline at end of file
diff --git a/paimon-web-ui/src/pages/Metadata/RightContent/Tabs/Table/index.tsx
b/paimon-web-ui/src/pages/Metadata/components/RightContent/components/MainContent/Table/index.tsx
similarity index 100%
rename from paimon-web-ui/src/pages/Metadata/RightContent/Tabs/Table/index.tsx
rename to
paimon-web-ui/src/pages/Metadata/components/RightContent/components/MainContent/Table/index.tsx
diff --git a/paimon-web-ui/src/pages/Metadata/RightContent/index.tsx
b/paimon-web-ui/src/pages/Metadata/components/RightContent/index.tsx
similarity index 84%
rename from paimon-web-ui/src/pages/Metadata/RightContent/index.tsx
rename to paimon-web-ui/src/pages/Metadata/components/RightContent/index.tsx
index 5ee83b6..ae52e89 100644
--- a/paimon-web-ui/src/pages/Metadata/RightContent/index.tsx
+++ b/paimon-web-ui/src/pages/Metadata/components/RightContent/index.tsx
@@ -15,11 +15,12 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import TableTab from "@pages/Metadata/RightContent/Tabs/Table";
+import TableTab from
"@pages/Metadata/components/RightContent/components/MainContent/Table";
+import styles from "./right-content.module.less"
const MetadataRightContent = () => {
return(
- <div style={{flex: 1}}>
+ <div className={styles.container}>
<span style={{color:
"var(--semi-color-text-0)"}}>paimon_table_01</span>
<TableTab/>
</div>
diff --git a/paimon-web-ui/src/pages/Layout/index.less
b/paimon-web-ui/src/pages/Metadata/components/RightContent/right-content.module.less
similarity index 90%
rename from paimon-web-ui/src/pages/Layout/index.less
rename to
paimon-web-ui/src/pages/Metadata/components/RightContent/right-content.module.less
index 5a2bad5..322353c 100644
--- a/paimon-web-ui/src/pages/Layout/index.less
+++
b/paimon-web-ui/src/pages/Metadata/components/RightContent/right-content.module.less
@@ -13,4 +13,9 @@ software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
-under the License. */
\ No newline at end of file
+under the License. */
+
+.container {
+ flex: 1;
+ padding: 10px 15px 0 15px;
+}
\ No newline at end of file
diff --git a/paimon-web-ui/src/pages/Metadata/index.tsx
b/paimon-web-ui/src/pages/Metadata/index.tsx
index ad75f86..86987d8 100644
--- a/paimon-web-ui/src/pages/Metadata/index.tsx
+++ b/paimon-web-ui/src/pages/Metadata/index.tsx
@@ -15,18 +15,17 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import MetadataSidebar from "@pages/Metadata/LeftContent";
+import MetadataSidebar from "@pages/Metadata/components/LeftContent";
import {Divider} from "@douyinfe/semi-ui";
-import MetadataRightContent from "@pages/Metadata/RightContent";
+import MetadataRightContent from "@pages/Metadata/components/RightContent";
+import styles from "./metadata.module.less";
const Index = () => {
return(
- <div style={{height: "100%", display: "flex", flexDirection:
"column"}}>
- <div style={{flex: 1, display: "flex"}}>
- <MetadataSidebar/>
- <Divider layout="vertical" margin='390px' style={{position:
'fixed', height: '100%', marginTop: "-25px"}}/>
- <MetadataRightContent/>
- </div>
+ <div className={styles.container}>
+ <MetadataSidebar/>
+ <Divider layout="vertical" margin='396px'
className={styles.divider}/>
+ <MetadataRightContent/>
</div>
)
}
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Metadata/metadata.module.less
similarity index 85%
copy from paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
copy to paimon-web-ui/src/pages/Metadata/metadata.module.less
index ee4772f..0488e48 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
+++ b/paimon-web-ui/src/pages/Metadata/metadata.module.less
@@ -15,12 +15,12 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-const BottomPanel = () => {
- return(
- <div>
- <div></div>
- </div>
- )
+.container {
+ display: flex;
+ flex-direction: row;
}
-export default BottomPanel;
+.divider {
+ height: 100%;
+ position: fixed;
+}
\ No newline at end of file
diff --git a/paimon-web-ui/src/pages/Playground/RightContent/index.tsx
b/paimon-web-ui/src/pages/Playground/RightContent/index.tsx
deleted file mode 100644
index 6582f55..0000000
--- a/paimon-web-ui/src/pages/Playground/RightContent/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/* Licensed to the Apache Software Foundation (ASF) under one
-or more contributor license agreements. See the NOTICE file
-distributed with this work for additional information
-regarding copyright ownership. The ASF licenses this file
-to you under the Apache License, Version 2.0 (the
-"License"); you may not use this file except in compliance
-with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing,
-software distributed under the License is distributed on an
-"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, either express or implied. See the License for the
-specific language governing permissions and limitations
-under the License. */
-
-import BottomPanel from "@pages/Playground/RightContent/BottomPanel";
-import TopPanel from "@pages/Playground/RightContent/TopPanel";
-import { Divider } from '@douyinfe/semi-ui';
-
-const PageContent = () => {
- return(
- <div style={{
- position: 'fixed',
- width: '1507px',
- height: '400px',
- marginTop: '-24px',
- right: '0',
- backgroundColor: 'var(--semi-color-bg-0)'
- }}>
- <span>
- <TopPanel/>
- </span>
-
- <span><Divider margin='-4px'/></span>
-
- <span>
- <BottomPanel/>
- </span>
- </div>
- )
-}
-
-export default PageContent;
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Playground/components/RightContent/components/BottomPanel/index.tsx
similarity index 100%
copy from paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
copy to
paimon-web-ui/src/pages/Playground/components/RightContent/components/BottomPanel/index.tsx
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/Tab/index.tsx
b/paimon-web-ui/src/pages/Playground/components/RightContent/components/TopPanel/Tab/index.tsx
similarity index 100%
rename from
paimon-web-ui/src/pages/Playground/RightContent/TopPanel/Tab/index.tsx
rename to
paimon-web-ui/src/pages/Playground/components/RightContent/components/TopPanel/Tab/index.tsx
diff --git a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
b/paimon-web-ui/src/pages/Playground/components/RightContent/components/TopPanel/index.tsx
similarity index 89%
rename from paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
rename to
paimon-web-ui/src/pages/Playground/components/RightContent/components/TopPanel/index.tsx
index d6870b0..234a1c6 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/TopPanel/index.tsx
+++
b/paimon-web-ui/src/pages/Playground/components/RightContent/components/TopPanel/index.tsx
@@ -15,7 +15,7 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import PlaygroundRightHeaderTab from
"@pages/Playground/RightContent/TopPanel/Tab";
+import PlaygroundRightHeaderTab from
"@pages/Playground/components/RightContent/components/TopPanel/Tab";
const TopPanel = () => {
return(
diff --git a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/index.tsx
b/paimon-web-ui/src/pages/Playground/components/RightContent/index.tsx
similarity index 63%
copy from paimon-web-ui/src/pages/Playground/TabMenuSidebar/index.tsx
copy to paimon-web-ui/src/pages/Playground/components/RightContent/index.tsx
index 920baf1..d2808e0 100644
--- a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/index.tsx
+++ b/paimon-web-ui/src/pages/Playground/components/RightContent/index.tsx
@@ -15,20 +15,19 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import SiderTab from "@pages/Playground/TabMenuSidebar/SiderTab";
+import BottomPanel from
"@pages/Playground/components/RightContent/components/BottomPanel";
+import TopPanel from
"@pages/Playground/components/RightContent/components/TopPanel";
+import { Divider } from '@douyinfe/semi-ui';
+import styles from "./right-content.module.less";
-const TabMenuSidebar = () => {
+const PageContent = () => {
return(
- <div style={{
- position: 'fixed',
- marginTop: '-23px',
- marginLeft: '-25px',
- backgroundColor: 'var(--semi-color-bg-1)',
- width: '414px',
- height: '100%'}}>
- <SiderTab/>
+ <div className={styles.container}>
+ <TopPanel/>
+ <Divider margin='-4px'/>
+ <BottomPanel/>
</div>
)
}
-export default TabMenuSidebar;
+export default PageContent;
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Playground/components/RightContent/right-content.module.less
similarity index 85%
copy from paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
copy to
paimon-web-ui/src/pages/Playground/components/RightContent/right-content.module.less
index ee4772f..03136e0 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
+++
b/paimon-web-ui/src/pages/Playground/components/RightContent/right-content.module.less
@@ -15,12 +15,8 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-const BottomPanel = () => {
- return(
- <div>
- <div></div>
- </div>
- )
-}
-
-export default BottomPanel;
+.container {
+ width: calc(100% - 416px);
+ background-color: var(--semi-color-bg-0);
+ padding: 0 0 0 2px;
+}
\ No newline at end of file
diff --git
a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/SiderTab/index.tsx
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/SiderTab/index.tsx
similarity index 84%
rename from paimon-web-ui/src/pages/Playground/TabMenuSidebar/SiderTab/index.tsx
rename to
paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/SiderTab/index.tsx
index 5d75781..f575714 100644
--- a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/SiderTab/index.tsx
+++
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/SiderTab/index.tsx
@@ -18,8 +18,9 @@ under the License. */
import {TabPane, Tabs} from '@douyinfe/semi-ui';
import {IconCode, IconListView, IconHistory} from '@douyinfe/semi-icons';
import CatalogDropdown from "@components/Dropdown/CatalogDropdown.tsx";
-import TreeNode from '@src/pages/Playground/TabMenuSidebar/TreeComponent';
+import TreeNode from
'@pages/Playground/components/TabMenuSidebar/components/TreeComponent';
import {useCallback, useEffect, useState} from "react";
+import styles from "./siderbar.module.less";
const TMP_CATALOG_LIST = [
@@ -109,26 +110,21 @@ const SiderTab = () => {
}
return (
- <Tabs tabPosition={"left"} type={"button"} tabPaneMotion={false}>
+ <Tabs tabPosition={"left"} type={"button"} tabPaneMotion={false}
className={styles.container}>
<TabPane
+ className={styles['tab-panel-container']}
tab={
<span>
<IconListView size={"extra-large"} title={"Catalog"}/>
</span>
} itemKey={'1'}>
- <div style={{height: '100%', display: 'flex', flexDirection:
'column', justifyContent: 'space-between'}}>
- <span style={{marginTop: '6px'}}>
- <CatalogDropdown
- reloadCatalogListCallBack={() =>
handleReloadCatalog()}
- reLoadCatalog={reLoadCatalog}
- catalogChange={handleCatalogChange}
- catalogList={catalogList}
- />
- </span>
- <span style={{marginTop: '0px'}}>
- <TreeNode/>
- </span>
- </div>
+ <CatalogDropdown
+ reloadCatalogListCallBack={() => handleReloadCatalog()}
+ reLoadCatalog={reLoadCatalog}
+ catalogChange={handleCatalogChange}
+ catalogList={catalogList}
+ />
+ <TreeNode/>
</TabPane>
<TabPane
tab={
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/SiderTab/siderbar.module.less
similarity index 85%
copy from paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
copy to
paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/SiderTab/siderbar.module.less
index ee4772f..4e5f598 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
+++
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/SiderTab/siderbar.module.less
@@ -15,12 +15,12 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-const BottomPanel = () => {
- return(
- <div>
- <div></div>
- </div>
- )
+.container {
+ width: 100%;
+ margin-right: 5px;
}
-export default BottomPanel;
+.tab-panel-container {
+ width: 100%;
+ padding: 10px 0 0 0;
+}
\ No newline at end of file
diff --git
a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/TreeComponent/index.tsx
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/TreeComponent/index.tsx
similarity index 96%
rename from
paimon-web-ui/src/pages/Playground/TabMenuSidebar/TreeComponent/index.tsx
rename to
paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/TreeComponent/index.tsx
index 75a6d01..70cc832 100644
--- a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/TreeComponent/index.tsx
+++
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/TreeComponent/index.tsx
@@ -19,6 +19,7 @@ import { Tree } from '@douyinfe/semi-ui';
import { Input } from '@douyinfe/semi-ui';
import { IconFilter } from '@douyinfe/semi-icons';
import { IconFile } from '@douyinfe/semi-icons';
+import styles from "./tree-component.module.less";
const TreeNode = () => {
const treeData = [
@@ -129,11 +130,6 @@ const TreeNode = () => {
}
];
- const style = {
- width: '18vw',
- height: '100%',
- };
-
/**
* 渲染树节点 使用自定义方式 ,可以直接点击节点 展开
* @param className
@@ -170,10 +166,10 @@ const TreeNode = () => {
treeData={treeData}
searchPlaceholder={"Filter"}
searchRender={({ prefix, ...restProps }) => (
- <Input suffix={<IconFilter />} {...restProps} style={{ width:
'18vw', marginLeft: '-12px'}}></Input>
+ <Input suffix={<IconFilter/>} {...restProps}></Input>
)}
renderFullLabel={renderLabel}
- style={style}
+ searchClassName={styles['tree-search-wrapper']}
/>
)
}
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/TreeComponent/tree-component.module.less
similarity index 85%
copy from paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
copy to
paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/TreeComponent/tree-component.module.less
index ee4772f..9c77a32 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
+++
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/components/TreeComponent/tree-component.module.less
@@ -15,12 +15,10 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-const BottomPanel = () => {
- return(
- <div>
- <div></div>
- </div>
- )
+.tree-search-wrapper {
+ padding: 10px 0 2px 0;
}
-export default BottomPanel;
+.catalog-tree-input {
+ background-color: var(--semi-color-bg-0);
+}
diff --git a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/index.tsx
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/index.tsx
similarity index 74%
rename from paimon-web-ui/src/pages/Playground/TabMenuSidebar/index.tsx
rename to paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/index.tsx
index 920baf1..f47fe1b 100644
--- a/paimon-web-ui/src/pages/Playground/TabMenuSidebar/index.tsx
+++ b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/index.tsx
@@ -15,17 +15,12 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import SiderTab from "@pages/Playground/TabMenuSidebar/SiderTab";
+import SiderTab from
"@pages/Playground/components/TabMenuSidebar/components/SiderTab";
+import styles from "./tab-menu-sidebar.module.less";
const TabMenuSidebar = () => {
return(
- <div style={{
- position: 'fixed',
- marginTop: '-23px',
- marginLeft: '-25px',
- backgroundColor: 'var(--semi-color-bg-1)',
- width: '414px',
- height: '100%'}}>
+ <div className={styles.container}>
<SiderTab/>
</div>
)
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/tab-menu-sidebar.module.less
similarity index 85%
copy from paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
copy to
paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/tab-menu-sidebar.module.less
index ee4772f..c65b2d6 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
+++
b/paimon-web-ui/src/pages/Playground/components/TabMenuSidebar/tab-menu-sidebar.module.less
@@ -15,12 +15,10 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-const BottomPanel = () => {
- return(
- <div>
- <div></div>
- </div>
- )
-}
-
-export default BottomPanel;
+.container {
+ width: 414px;
+ height: 100%;
+ background-color: var(--semi-color-bg-1);
+ display: flex;
+ flex-direction: row;
+}
\ No newline at end of file
diff --git a/paimon-web-ui/src/pages/Playground/index.tsx
b/paimon-web-ui/src/pages/Playground/index.tsx
index 6df23b6..cad013b 100644
--- a/paimon-web-ui/src/pages/Playground/index.tsx
+++ b/paimon-web-ui/src/pages/Playground/index.tsx
@@ -15,20 +15,17 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-import TabMenuSidebar from "@src/pages/Playground/TabMenuSidebar";
-import RightContent from "@pages/Playground/RightContent";
+import TabMenuSidebar from "@pages/Playground/components/TabMenuSidebar";
+import RightContent from "@pages/Playground/components/RightContent";
import {Divider} from "@douyinfe/semi-ui";
+import styles from "./playground.module.less"
export default function Index() {
return(
- <div style={{height: 'auto'}}>
- <span>
- <TabMenuSidebar/>
- </span>
- <span><Divider layout="vertical" margin='388px' style={{position:
'fixed', height: '100%', marginTop: '-25px'}}/></span>
- <span>
- <RightContent/>
- </span>
+ <div className={styles.container}>
+ <TabMenuSidebar/>
+ <Divider layout="vertical" margin='415px'
className={styles.divider}/>
+ <RightContent/>
</div>
)
}
diff --git
a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
b/paimon-web-ui/src/pages/Playground/playground.module.less
similarity index 85%
rename from
paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
rename to paimon-web-ui/src/pages/Playground/playground.module.less
index ee4772f..a0c0a83 100644
--- a/paimon-web-ui/src/pages/Playground/RightContent/BottomPanel/index.tsx
+++ b/paimon-web-ui/src/pages/Playground/playground.module.less
@@ -15,12 +15,13 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-const BottomPanel = () => {
- return(
- <div>
- <div></div>
- </div>
- )
+.container {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
}
-export default BottomPanel;
+.divider {
+ position: fixed;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/paimon-web-ui/src/router/index.tsx
b/paimon-web-ui/src/router/index.tsx
index 0799c97..f481638 100644
--- a/paimon-web-ui/src/router/index.tsx
+++ b/paimon-web-ui/src/router/index.tsx
@@ -20,7 +20,7 @@ import { RouteObject } from 'react-router';
import { useRoutes } from 'react-router-dom';
import LayoutPage from '@src/pages/Layout';
import PlaygroundPage from '@src/pages/Playground';
-import MetaDataPage from '@src/pages/Metadata';
+import MetaDataPage from '@pages/Metadata';
import DevStatus from "@pages/Abnormal/Dev";
/*const Editor = lazy(() => import('@src/pages/Playground'))
diff --git a/paimon-web-ui/vite.config.ts b/paimon-web-ui/vite.config.ts
index b575858..812d23e 100644
--- a/paimon-web-ui/vite.config.ts
+++ b/paimon-web-ui/vite.config.ts
@@ -17,10 +17,14 @@ under the License. */
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
+import SemiPlugin from "vite-plugin-semi-theme";
import { resolve } from 'path'
export default defineConfig({
plugins: [
+ SemiPlugin({
+ theme: "@semi-bot/semi-theme-figma"
+ }),
react()
],
resolve: {
