This is an automated email from the ASF dual-hosted git repository.
nicholasjiang 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 a5e42b9 [Feature] Support sided bar (#115)
a5e42b9 is described below
commit a5e42b9cc6a96b25a6dda923f782fc37c96c54d4
Author: yangyang zhong <[email protected]>
AuthorDate: Wed Dec 13 13:11:45 2023 +0800
[Feature] Support sided bar (#115)
---
paimon-web-ui-new/package.json | 4 ++
paimon-web-ui-new/src/api/models/login/index.ts | 2 +-
.../layouts/content/components/menubar/index.tsx | 40 ++---------
.../layouts/content/components/sidebar/index.tsx | 65 ++++++++++++++++++
.../layouts/content/components/topbar/index.tsx | 9 ++-
paimon-web-ui-new/src/layouts/content/index.tsx | 36 ++++++++--
paimon-web-ui-new/src/layouts/content/use-data.ts | 80 ++++++++++++++++++++++
paimon-web-ui-new/src/locales/en/modules/layout.ts | 2 +
paimon-web-ui-new/src/locales/zh/modules/layout.ts | 2 +
paimon-web-ui-new/src/router/modules/system.ts | 15 +++-
.../system/role/index.module.scss} | 15 ++--
.../layout.ts => views/system/role/index.tsx} | 23 ++++---
.../system/user/index.module.scss} | 15 ++--
.../layout.ts => views/system/user/index.tsx} | 23 ++++---
paimon-web-ui-new/vite.config.ts | 2 +-
15 files changed, 261 insertions(+), 72 deletions(-)
diff --git a/paimon-web-ui-new/package.json b/paimon-web-ui-new/package.json
index 4b551b3..a1b45a0 100644
--- a/paimon-web-ui-new/package.json
+++ b/paimon-web-ui-new/package.json
@@ -20,6 +20,8 @@
"mitt": "^3.0.1",
"monaco-editor": "^0.43.0",
"pinia": "^2.1.6",
+ "@vicons/antd": "^0.12.0",
+ "@vicons/carbon": "^0.12.0",
"pinia-plugin-persistedstate": "^3.2.0",
"sass": "^1.66.1",
"sass-loader": "^13.3.2",
@@ -34,6 +36,8 @@
"@types/lodash": "^4.14.200",
"@types/node": "^18.17.15",
"@varlet/axle": "^0.2.5",
+ "@vicons/antd": "^0.12.0",
+ "@vicons/carbon": "^0.12.0",
"@vicons/ionicons5": "^0.12.0",
"@vitejs/plugin-vue": "^4.3.4",
"@vitejs/plugin-vue-jsx": "^3.0.2",
diff --git a/paimon-web-ui-new/src/api/models/login/index.ts
b/paimon-web-ui-new/src/api/models/login/index.ts
index 0a7f91a..b29d4e0 100644
--- a/paimon-web-ui-new/src/api/models/login/index.ts
+++ b/paimon-web-ui-new/src/api/models/login/index.ts
@@ -16,7 +16,7 @@ specific language governing permissions and limitations
under the License. */
import httpRequest from '../../request'
-import type ResponseOptions from '@/api/types'
+import type { ResponseOptions } from '@/api/types'
import type { LoginOptions } from './interface'
// #region login-controller
diff --git a/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
b/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
index cdd25dd..1cd6f27 100644
--- a/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
+++ b/paimon-web-ui-new/src/layouts/content/components/menubar/index.tsx
@@ -16,44 +16,19 @@ specific language governing permissions and limitations
under the License. */
import { useConfigStore } from "@/store/config"
-import { RouterLink } from "vue-router"
import type { NavBar } from "@/store/config/type"
+import type { MenuOption } from "naive-ui/es/menu/src/interface"
export default defineComponent({
+ props:{
+ menuOptions: {
+ type: Array<MenuOption>,
+ default: []
+ },
+ },
name: 'MenuBar',
setup() {
- const { t } = useLocaleHooks()
const configStore = useConfigStore()
-
- const renderLabel = (label: string, link: string) => {
- return h(
- RouterLink,
- {
- to: {name: link}
- },
- { default: () => label }
- )
- }
-
- const menuOptions = computed(() => ([
- {
- label: () => renderLabel(t('layout.playground'), 'playground'),
- key: 'playground',
- },
- {
- label: () => renderLabel(t('layout.metadata'), 'metadata'),
- key: 'metadata',
- },
- {
- label: () => renderLabel(t('layout.cdc_ingestion'), 'cdc_ingestion'),
- key: 'cdc_ingestion',
- },
- {
- label: () => renderLabel(t('layout.system'), 'system'),
- key: 'system',
- },
- ]))
-
const activeKey = ref<string>('playground')
const handleUpdateValue = (value: string) => {
@@ -67,7 +42,6 @@ export default defineComponent({
return {
activeKey,
- menuOptions,
handleUpdateValue
}
},
diff --git a/paimon-web-ui-new/src/layouts/content/components/sidebar/index.tsx
b/paimon-web-ui-new/src/layouts/content/components/sidebar/index.tsx
new file mode 100644
index 0000000..911a4ed
--- /dev/null
+++ b/paimon-web-ui-new/src/layouts/content/components/sidebar/index.tsx
@@ -0,0 +1,65 @@
+/* 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 type { MenuOption } from 'naive-ui/es/menu/src/interface'
+import { defineComponent, ref, type PropType } from 'vue'
+import { useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
+
+const Sidebar = defineComponent({
+ name: 'Sidebar',
+ props: {
+ sideMenuOptions: {
+ type: Array<MenuOption>,
+ default: []
+ },
+ },
+ setup() {
+ const collapsedRef = ref(false)
+
+ const router: Router = useRouter()
+
+ const handleMenuClick = (key: string) => {
+ router.push({
+ path: `${key}`,
+ })
+ }
+
+ return { collapsedRef, handleMenuClick }
+ },
+ render() {
+ return (
+ <n-layout-sider
+ bordered
+ nativeScrollbar={false}
+ show-trigger='bar'
+ collapse-mode='width'
+ collapsed={this.collapsedRef}
+ onCollapse={() => (this.collapsedRef = true)}
+ onExpand={() => (this.collapsedRef = false)}
+ >
+ <n-menu
+ options={this.sideMenuOptions}
+ onUpdateValue={this.handleMenuClick}
+ />
+ </n-layout-sider >
+ )
+ }
+})
+
+export default Sidebar
diff --git a/paimon-web-ui-new/src/layouts/content/components/topbar/index.tsx
b/paimon-web-ui-new/src/layouts/content/components/topbar/index.tsx
index 4024b1e..d5f4ecf 100644
--- a/paimon-web-ui-new/src/layouts/content/components/topbar/index.tsx
+++ b/paimon-web-ui-new/src/layouts/content/components/topbar/index.tsx
@@ -19,8 +19,15 @@ import styles from './index.module.scss'
import logoImage from '@/assets/logo.svg'
import MenuBar from '../menubar'
import ToolBar from '../toolbar'
+import type { MentionOption } from 'naive-ui'
export default defineComponent({
+ props:{
+ headerMenuOptions: {
+ type: Array<MentionOption>,
+ default: []
+ },
+ },
name: 'TopBar',
setup() {
},
@@ -36,7 +43,7 @@ export default defineComponent({
</n-space>
</div>
<div class={styles['menu-bar']}>
- <MenuBar />
+ <MenuBar menuOptions={this.headerMenuOptions}/>
</div>
<div class={styles.toolbar}>
<ToolBar />
diff --git a/paimon-web-ui-new/src/layouts/content/index.tsx
b/paimon-web-ui-new/src/layouts/content/index.tsx
index 65ecd61..0a87796 100644
--- a/paimon-web-ui-new/src/layouts/content/index.tsx
+++ b/paimon-web-ui-new/src/layouts/content/index.tsx
@@ -17,21 +17,47 @@ under the License. */
import NavBar from './components/topbar'
import styles from './index.module.scss'
+import SideBar from './components/sidebar'
+import { useData } from './use-data'
+import { useConfigStore } from '@/store/config'
export default defineComponent({
name: 'ContentPage',
setup() {
+ const configStore = useConfigStore()
+ const route = useRoute()
+ const { menuOptions, state } = useData()
+ const getSideOption = (state: any) => {
+ const activeNavKey = configStore.getCurrentNavActive
+ state.sideMenuOptions = menuOptions.value.find((m: any) => m.key ===
activeNavKey)?.sideMenuOptions || []
+ state.isShowSided = state.sideMenuOptions && state.sideMenuOptions.length
+ }
+ getSideOption(state)
+ watch(
+ () => configStore.getCurrentNavActive,
+ () => { getSideOption(state)})
+ return {
+ ...toRefs(state),
+ menuOptions
+ }
},
render() {
return (
<div class={styles['container']}>
- <n-layout>
+ <n-layout style='height: 100%'>
<n-layout-header style="height: 64px;" bordered>
- <NavBar></NavBar>
+ <NavBar headerMenuOptions={this.menuOptions}></NavBar>
</n-layout-header>
- <n-layout-content content-style="height: calc(100vh - 64px);">
- <router-view />
- </n-layout-content>
+ <n-layout has-sider position='absolute' style='top: 64px'>
+ {this.isShowSided && (
+ <SideBar
+ sideMenuOptions={this.sideMenuOptions}
+ />
+ )}
+ <n-layout-content content-style="height: calc(100vh - 64px);">
+ <router-view />
+ </n-layout-content>
+ </n-layout>
</n-layout>
</div>
)
diff --git a/paimon-web-ui-new/src/layouts/content/use-data.ts
b/paimon-web-ui-new/src/layouts/content/use-data.ts
new file mode 100644
index 0000000..17f58aa
--- /dev/null
+++ b/paimon-web-ui-new/src/layouts/content/use-data.ts
@@ -0,0 +1,80 @@
+/* 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 { RouterLink } from "vue-router"
+import { UserOutlined,UserSwitchOutlined,FileSyncOutlined} from '@vicons/antd'
+import {Catalog,Code} from '@vicons/carbon'
+import { NIcon } from "naive-ui"
+import { SettingsOutline } from "@vicons/ionicons5"
+
+
+export const useData = () => {
+ const { t } = useLocaleHooks()
+ const state = reactive({
+ isShowSided : true,
+ sideMenuOptions:[]
+ })
+ const renderIcon = (icon: any) => {
+ return () => h(NIcon, null, { default: () => h(icon) })
+ }
+ const renderLabel = (label: string, link: string) => {
+ return h(
+ RouterLink,
+ {
+ to: { name: link }
+ },
+ { default: () => label }
+ )
+ }
+ const menuOptions = computed(() => ([
+ {
+ label: () => renderLabel(t('layout.playground'), 'playground'),
+ key: 'playground',
+ icon: renderIcon(Code)
+ },
+ {
+ label: () => renderLabel(t('layout.metadata'), 'metadata'),
+ key: 'metadata',
+ icon: renderIcon(Catalog)
+ },
+ {
+ label: () => renderLabel(t('layout.cdc_ingestion'), 'cdc_ingestion'),
+ key: 'cdc_ingestion',
+ icon: renderIcon(FileSyncOutlined)
+ },
+ {
+ label: () => renderLabel(t('layout.system'), 'system'),
+ key: 'system',
+ icon: renderIcon(SettingsOutline),
+ sideMenuOptions:[{
+ label: ()=> renderLabel(t('layout.user'), 'system'),
+ key: '/system/user',
+ icon: renderIcon(UserOutlined)
+ },{
+ label: ()=> renderLabel(t('layout.role'), 'system'),
+ key: '/system/role',
+ icon: renderIcon(UserSwitchOutlined)
+ }]
+ },
+ ]))
+ return {
+ menuOptions,
+ state
+ }
+}
+
diff --git a/paimon-web-ui-new/src/locales/en/modules/layout.ts
b/paimon-web-ui-new/src/locales/en/modules/layout.ts
index d6e8f26..bed3db9 100644
--- a/paimon-web-ui-new/src/locales/en/modules/layout.ts
+++ b/paimon-web-ui-new/src/locales/en/modules/layout.ts
@@ -24,4 +24,6 @@ export default {
dark: 'Dark',
cancel: 'Cancel',
confirm: 'Confirm',
+ user:'User',
+ role:'Role'
}
diff --git a/paimon-web-ui-new/src/locales/zh/modules/layout.ts
b/paimon-web-ui-new/src/locales/zh/modules/layout.ts
index e7e09ae..241367d 100644
--- a/paimon-web-ui-new/src/locales/zh/modules/layout.ts
+++ b/paimon-web-ui-new/src/locales/zh/modules/layout.ts
@@ -24,4 +24,6 @@ export default {
dark: '暗色',
cancel: '取消',
confirm: '确认',
+ user:'用户管理',
+ role:'权限管理'
}
diff --git a/paimon-web-ui-new/src/router/modules/system.ts
b/paimon-web-ui-new/src/router/modules/system.ts
index aff5d3c..101d9df 100644
--- a/paimon-web-ui-new/src/router/modules/system.ts
+++ b/paimon-web-ui-new/src/router/modules/system.ts
@@ -19,5 +19,18 @@ export default {
path: '/system',
name: 'system',
meta: { title: 'System' },
- component: () => import('@/views/system'),
+ children: [
+ {
+ path: '/system/user',
+ name: 'system-user',
+ meta: { title: 'user' },
+ component: () => import('@/views/system/user')
+ },
+ {
+ path: '/system/role',
+ name: 'system-role',
+ meta: { title: 'role' },
+ component: () => import('@/views/system/role')
+ },
+ ]
}
diff --git a/paimon-web-ui-new/src/router/modules/system.ts
b/paimon-web-ui-new/src/views/system/role/index.module.scss
similarity index 83%
copy from paimon-web-ui-new/src/router/modules/system.ts
copy to paimon-web-ui-new/src/views/system/role/index.module.scss
index aff5d3c..fe437d9 100644
--- a/paimon-web-ui-new/src/router/modules/system.ts
+++ b/paimon-web-ui-new/src/views/system/role/index.module.scss
@@ -15,9 +15,14 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/system',
- name: 'system',
- meta: { title: 'System' },
- component: () => import('@/views/system'),
+.container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+
+ .content {
+ display: flex;
+ width: calc(100% - 60px);
+ height: 100%;
+ }
}
diff --git a/paimon-web-ui-new/src/locales/en/modules/layout.ts
b/paimon-web-ui-new/src/views/system/role/index.tsx
similarity index 77%
copy from paimon-web-ui-new/src/locales/en/modules/layout.ts
copy to paimon-web-ui-new/src/views/system/role/index.tsx
index d6e8f26..3c895f2 100644
--- a/paimon-web-ui-new/src/locales/en/modules/layout.ts
+++ b/paimon-web-ui-new/src/views/system/role/index.tsx
@@ -15,13 +15,16 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- playground: 'Playground',
- metadata: 'MetaData',
- cdc_ingestion: 'CDC Ingestion',
- system: 'System',
- light: 'Light',
- dark: 'Dark',
- cancel: 'Cancel',
- confirm: 'Confirm',
-}
+import styles from './index.module.scss';
+
+export default defineComponent({
+ name: 'RolePage',
+ setup() {
+ return {}
+ },
+ render() {
+ return (
+ <div class={styles.container}>RolePage</div>
+ )
+ }
+})
diff --git a/paimon-web-ui-new/src/router/modules/system.ts
b/paimon-web-ui-new/src/views/system/user/index.module.scss
similarity index 83%
copy from paimon-web-ui-new/src/router/modules/system.ts
copy to paimon-web-ui-new/src/views/system/user/index.module.scss
index aff5d3c..fe437d9 100644
--- a/paimon-web-ui-new/src/router/modules/system.ts
+++ b/paimon-web-ui-new/src/views/system/user/index.module.scss
@@ -15,9 +15,14 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- path: '/system',
- name: 'system',
- meta: { title: 'System' },
- component: () => import('@/views/system'),
+.container {
+ display: flex;
+ width: 100%;
+ height: 100%;
+
+ .content {
+ display: flex;
+ width: calc(100% - 60px);
+ height: 100%;
+ }
}
diff --git a/paimon-web-ui-new/src/locales/en/modules/layout.ts
b/paimon-web-ui-new/src/views/system/user/index.tsx
similarity index 77%
copy from paimon-web-ui-new/src/locales/en/modules/layout.ts
copy to paimon-web-ui-new/src/views/system/user/index.tsx
index d6e8f26..cf385b8 100644
--- a/paimon-web-ui-new/src/locales/en/modules/layout.ts
+++ b/paimon-web-ui-new/src/views/system/user/index.tsx
@@ -15,13 +15,16 @@ KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License. */
-export default {
- playground: 'Playground',
- metadata: 'MetaData',
- cdc_ingestion: 'CDC Ingestion',
- system: 'System',
- light: 'Light',
- dark: 'Dark',
- cancel: 'Cancel',
- confirm: 'Confirm',
-}
+import styles from './index.module.scss';
+
+export default defineComponent({
+ name: 'UserPage',
+ setup() {
+ return {}
+ },
+ render() {
+ return (
+ <div class={styles.container}>UserPage</div>
+ )
+ }
+})
diff --git a/paimon-web-ui-new/vite.config.ts b/paimon-web-ui-new/vite.config.ts
index be76e23..96dae1f 100644
--- a/paimon-web-ui-new/vite.config.ts
+++ b/paimon-web-ui-new/vite.config.ts
@@ -29,7 +29,7 @@ export default defineConfig({
server: {
proxy: {
'/api': {
- target: 'http://47.94.247.86:10088',
+ target: 'http://127.0.0.1:10088',
changeOrigin: true,
}
}
