This is an automated email from the ASF dual-hosted git repository.
kezhenxu94 pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 9f9ddea [Feature][UI Next] Add layout content, theme and i18n. (#7690)
9f9ddea is described below
commit 9f9ddea8dc7696b05e4d6712d899a9714cb9b9f1
Author: songjianet <[email protected]>
AuthorDate: Tue Dec 28 21:30:29 2021 +0800
[Feature][UI Next] Add layout content, theme and i18n. (#7690)
---
dolphinscheduler-ui-next/index.html | 8 --
dolphinscheduler-ui-next/src/App.tsx | 2 +-
.../src/assets/styles/default.scss | 10 ++
.../content/components/navbar/index.module.scss | 3 +-
.../content/components/navbar/use-menuClick.ts | 2 +-
.../layouts/content/components/sidebar/index.tsx | 37 ++++--
.../src/layouts/content/index.module.scss | 20 ----
.../src/layouts/content/index.tsx | 30 +++--
.../src/layouts/content/use-dataList.ts | 133 +++++++++++----------
.../src/locales/modules/en_US.ts | 41 +++++++
.../src/locales/modules/zh_CN.ts | 41 +++++++
.../src/views/home/index.module.scss | 8 --
dolphinscheduler-ui-next/src/views/home/index.tsx | 3 +-
13 files changed, 213 insertions(+), 125 deletions(-)
diff --git a/dolphinscheduler-ui-next/index.html
b/dolphinscheduler-ui-next/index.html
index 0c857b6..625b9c2 100644
--- a/dolphinscheduler-ui-next/index.html
+++ b/dolphinscheduler-ui-next/index.html
@@ -28,12 +28,4 @@
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
- <style>
- html, body {
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- }
- </style>
</html>
diff --git a/dolphinscheduler-ui-next/src/App.tsx
b/dolphinscheduler-ui-next/src/App.tsx
index 685cf63..df3a276 100644
--- a/dolphinscheduler-ui-next/src/App.tsx
+++ b/dolphinscheduler-ui-next/src/App.tsx
@@ -39,7 +39,7 @@ const App = defineComponent({
<NConfigProvider
theme={this.currentTheme}
themeOverrides={themeOverrides}
- style={{ width: '100%', height: '100vh', overflow: 'hidden' }}
+ style={{ width: '100%', height: '100vh' }}
>
<router-view />
</NConfigProvider>
diff --git a/dolphinscheduler-ui-next/src/assets/styles/default.scss
b/dolphinscheduler-ui-next/src/assets/styles/default.scss
index 782dbcd..fac4291 100644
--- a/dolphinscheduler-ui-next/src/assets/styles/default.scss
+++ b/dolphinscheduler-ui-next/src/assets/styles/default.scss
@@ -19,6 +19,16 @@
outline: 0;
}
+html, body {
+ width: 100%;
+ height: 100%;
+ //scrollbar-width: none;
+ //-ms-overflow-style: none;
+ //::-webkit-scrollbar {
+ // display: none;
+ //}
+}
+
html, body, p, dl, dd, dt {
margin: 0;
padding: 0;
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
index 31b57b3..b618926 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
+++
b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.module.scss
@@ -20,11 +20,12 @@
align-items: center;
width: 100%;
height: 64px;
+ border-bottom: 1px solid var(--border-color);
.nav {
margin-left: 12px;
}
-
+
.settings {
display: flex;
flex: 1;
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
index eb2aaf6..94a691a 100644
---
a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
+++
b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
@@ -20,7 +20,7 @@ import type { Router } from 'vue-router'
import { MenuOption } from 'naive-ui'
import { SetupContext } from 'vue'
-export function useMenuClick(ctx: SetupContext<"handleMenuClick"[]>) {
+export function useMenuClick(ctx: SetupContext<'handleMenuClick'[]>) {
const router: Router = useRouter()
const handleMenuClick = (key: string, item: MenuOption) => {
diff --git
a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
index 07ee452..77f1660 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, ref } from 'vue'
import styles from './index.module.scss'
import { NLayoutSider, NMenu } from 'naive-ui'
@@ -29,21 +29,38 @@ const Sidebar = defineComponent({
isShowSide: {
type: Boolean as PropType<boolean>,
default: false,
- }
+ },
},
setup() {
- return {}
+ const collapsedRef = ref(false)
+ const defaultExpandedKeys = [
+ 'workflow',
+ 'udf-manage',
+ 'service-manage',
+ 'statistical-manage',
+ ]
+
+ return { collapsedRef, defaultExpandedKeys }
},
render() {
- if (this.isShowSide) {
- return (
- <NLayoutSider bordered nativeScrollbar={false} show-trigger='bar'>
- <NMenu options={this.sideMenuOptions} default-expand-all />
+ return (
+ this.isShowSide && (
+ <NLayoutSider
+ bordered
+ nativeScrollbar={false}
+ show-trigger='bar'
+ collapse-mode='width'
+ collapsed={this.collapsedRef}
+ onCollapse={() => (this.collapsedRef = true)}
+ onExpand={() => (this.collapsedRef = false)}
+ >
+ <NMenu
+ options={this.sideMenuOptions}
+ defaultExpandedKeys={this.defaultExpandedKeys}
+ />
</NLayoutSider>
)
- } else {
- return
- }
+ )
},
})
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.module.scss
b/dolphinscheduler-ui-next/src/layouts/content/index.module.scss
deleted file mode 100644
index 4da858d..0000000
--- a/dolphinscheduler-ui-next/src/layouts/content/index.module.scss
+++ /dev/null
@@ -1,20 +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.
- */
-
-.content {
- padding: 12px;
-}
\ No newline at end of file
diff --git a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
index b588bc0..92b387e 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui-next/src/layouts/content/index.tsx
@@ -17,10 +17,8 @@
import { defineComponent, ref, toRefs } from 'vue'
import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
-import styles from './index.module.scss'
import NavBar from './components/navbar'
import SideBar from './components/sidebar'
-
import { useDataList } from './use-dataList'
const Content = defineComponent({
@@ -33,16 +31,23 @@ const Content = defineComponent({
const sideMenuOptions = ref()
const getSideMenuOptions = (item: any) => {
- sideMenuOptions.value = state.menuOptions.filter(menu => menu.key ===
item.key)[0].children || []
- state.isShowSide = (sideMenuOptions.value.length !== 0)
+ sideMenuOptions.value =
+ state.menuOptions.filter((menu) => menu.key === item.key)[0].children
||
+ []
+ state.isShowSide = sideMenuOptions.value.length !== 0
+ }
+
+ return {
+ ...toRefs(state),
+ headerMenuOptions,
+ getSideMenuOptions,
+ sideMenuOptions,
}
-
- return { ...toRefs(state), headerMenuOptions, getSideMenuOptions,
sideMenuOptions }
},
render() {
return (
- <NLayout>
- <NLayoutHeader>
+ <NLayout style='height: 100%;'>
+ <NLayoutHeader style='height: 65px;'>
<NavBar
onHandleMenuClick={this.getSideMenuOptions}
headerMenuOptions={this.headerMenuOptions}
@@ -50,9 +55,12 @@ const Content = defineComponent({
profileOptions={this.profileOptions}
/>
</NLayoutHeader>
- <NLayout has-sider>
- <SideBar sideMenuOptions={this.sideMenuOptions}
isShowSide={this.isShowSide} />
- <NLayoutContent class={styles.content}>
+ <NLayout has-sider position='absolute' style='top: 65px;'>
+ <SideBar
+ sideMenuOptions={this.sideMenuOptions}
+ isShowSide={this.isShowSide}
+ />
+ <NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
<router-view />
</NLayoutContent>
</NLayout>
diff --git a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
index f6e27e5..ad33bf6 100644
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
@@ -17,6 +17,7 @@
import { reactive, h } from 'vue'
import { NIcon } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
import {
HomeOutlined,
ProfileOutlined,
@@ -39,168 +40,174 @@ import {
ControlOutlined,
SlackOutlined,
EnvironmentOutlined,
- KeyOutlined
+ KeyOutlined,
} from '@vicons/antd'
export function useDataList() {
+ const { t } = useI18n()
+
const renderIcon = (icon: any) => {
return () => h(NIcon, null, { default: () => h(icon) })
}
const menuOptions = [
{
- label: '首页',
+ label: t('menu.home'),
key: 'home',
icon: renderIcon(HomeOutlined),
},
{
- label: '项目管理',
+ label: t('menu.project'),
key: 'project',
icon: renderIcon(ProfileOutlined),
children: [
{
- label: '工作流监控',
+ label: t('menu.workflow_monitoring'),
key: 'workflow-monitoring',
icon: renderIcon(FundProjectionScreenOutlined),
},
{
- label: '工作流关系',
+ label: t('menu.workflow_relationships'),
key: 'workflow-relationships',
icon: renderIcon(PartitionOutlined),
},
{
- label: '工作流',
+ label: t('menu.workflow'),
key: 'workflow',
icon: renderIcon(SettingOutlined),
children: [
{
- label: '工作流定义',
- key: 'workflow-definition'
+ label: t('menu.workflow_definition'),
+ key: 'workflow-definition',
+ },
+ {
+ label: t('menu.workflow_instance'),
+ key: 'workflow-instance',
},
{
- label: '工作流实例',
- key: 'workflow-instance'
+ label: t('menu.task_instance'),
+ key: 'task-instance',
},
{
- label: '任务实例',
- key: 'task-instance'
- }
- ]
+ label: t('menu.task_definition'),
+ key: 'task-definition',
+ },
+ ],
},
],
},
{
- label: '资源中心',
+ label: t('menu.resources'),
key: 'resources',
icon: renderIcon(FolderOutlined),
children: [
{
- label: '文件管理',
- key: 'file-management',
+ label: t('menu.file_manage'),
+ key: 'file-manage',
icon: renderIcon(FileSearchOutlined),
},
{
- label: 'UDF管理',
- key: 'UDF-management',
+ label: t('menu.udf_manage'),
+ key: 'udf-manage',
icon: renderIcon(RobotOutlined),
children: [
{
- label: '资源管理',
- key: 'resource-management'
+ label: t('menu.resource_manage'),
+ key: 'resource-manage',
},
{
- label: '函数管理',
- key: 'function-management'
- }
- ]
+ label: t('menu.function_manage'),
+ key: 'function-manage',
+ },
+ ],
},
],
},
{
- label: '数据源中心',
+ label: t('menu.datasource'),
key: 'datasource',
icon: renderIcon(DatabaseOutlined),
},
{
- label: '监控中心',
+ label: t('menu.monitor'),
key: 'monitor',
icon: renderIcon(DesktopOutlined),
children: [
{
- label: '服务管理',
- key: 'service-management',
+ label: t('menu.service_manage'),
+ key: 'service-manage',
icon: renderIcon(AppstoreOutlined),
children: [
{
- label: 'Master',
- key: 'master'
+ label: t('menu.master'),
+ key: 'master',
},
{
- label: 'Worker',
- key: 'worker'
+ label: t('menu.worker'),
+ key: 'worker',
},
{
- label: 'DB',
- key: 'DB'
- }
- ]
+ label: t('menu.db'),
+ key: 'db',
+ },
+ ],
},
{
- label: '统计管理',
- key: 'statistical-management',
+ label: t('menu.statistical_manage'),
+ key: 'statistical-manage',
icon: renderIcon(AppstoreOutlined),
children: [
{
- label: 'Statistics',
- key: 'statistics'
+ label: t('menu.statistics'),
+ key: 'statistics',
},
],
},
],
},
{
- label: '安全中心',
+ label: t('menu.security'),
key: 'security',
icon: renderIcon(SafetyCertificateOutlined),
children: [
{
- label: '租户管理',
- key: 'tenant-management',
+ label: t('menu.tenant_manage'),
+ key: 'tenant-manage',
icon: renderIcon(UsergroupAddOutlined),
},
{
- label: '用户管理',
- key: 'user-management',
+ label: t('menu.user_manage'),
+ key: 'user-manage',
icon: renderIcon(UserAddOutlined),
},
{
- label: '告警组管理',
- key: 'alarm-group-management',
+ label: t('menu.alarm_group_manage'),
+ key: 'alarm-group-manage',
icon: renderIcon(WarningOutlined),
},
{
- label: '告警实例管理',
- key: 'alarm-instance-management',
+ label: t('menu.alarm_instance_manage'),
+ key: 'alarm-instance-manage',
icon: renderIcon(InfoCircleOutlined),
},
{
- label: 'Worker分组管理',
- key: 'worker-group-management',
+ label: t('menu.worker_group_manage'),
+ key: 'worker-group-manage',
icon: renderIcon(ControlOutlined),
},
{
- label: 'Yarn 队列管理',
- key: 'yarn-queue-management',
+ label: t('menu.yarn_queue_manage'),
+ key: 'yarn-queue-manage',
icon: renderIcon(SlackOutlined),
},
{
- label: '环境管理',
- key: 'environmental-management',
+ label: t('menu.environmental_manage'),
+ key: 'environmental-manage',
icon: renderIcon(EnvironmentOutlined),
},
{
- label: '令牌管理',
- key: 'token-management',
+ label: t('menu.token_manage'),
+ key: 'token-manage',
icon: renderIcon(KeyOutlined),
},
],
@@ -220,12 +227,12 @@ export function useDataList() {
const profileOptions = [
{
- label: '用户信息',
+ label: t('profile.profile'),
key: 'profile',
icon: renderIcon(UserOutlined),
},
{
- label: '退出登录',
+ label: t('profile.logout'),
key: 'logout',
icon: renderIcon(LogoutOutlined),
},
@@ -247,9 +254,9 @@ export function useDataList() {
const state = reactive({
isShowSide: false,
- menuOptions: menuOptions,
- languageOptions: languageOptions,
- profileOptions: profileOptions
+ menuOptions,
+ languageOptions,
+ profileOptions,
})
return {
diff --git a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
index 067c529..5b52520 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
@@ -29,7 +29,48 @@ const theme = {
dark: 'Dark',
}
+const profile = {
+ profile: 'Profile',
+ logout: 'Logout',
+}
+
+const menu = {
+ home: 'Home',
+ project: 'Project',
+ resources: 'Resources',
+ datasource: 'Datasource',
+ monitor: 'Monitor',
+ security: 'Security',
+ workflow_monitoring: 'Workflow Monitoring',
+ workflow_relationships: 'Workflow Relationships',
+ workflow: 'Workflow',
+ workflow_definition: 'Workflow Definition',
+ workflow_instance: 'Workflow Instance',
+ task_instance: 'Task Instance',
+ task_definition: 'Task Definition',
+ file_manage: 'File Manage',
+ udf_manage: 'UDF Manage',
+ resource_manage: 'Resource Manage',
+ function_manage: 'Function Manage',
+ service_manage: 'Service Manage',
+ master: 'Master',
+ worker: 'Worker',
+ db: 'DB',
+ statistical_manage: 'Statistical Manage',
+ statistics: 'Statistics',
+ tenant_manage: 'Tenant Manage',
+ user_manage: 'User Manage',
+ alarm_group_manage: 'Alarm Group Manage',
+ alarm_instance_manage: 'Alarm Instance Manage',
+ worker_group_manage: 'Worker Group Manage',
+ yarn_queue_manage: 'Yarn Queue Manage',
+ environmental_manage: 'Environmental Manage',
+ token_manage: 'Token Manage',
+}
+
export default {
login,
theme,
+ profile,
+ menu,
}
diff --git a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
index ed22231..d04610e 100644
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
@@ -29,7 +29,48 @@ const theme = {
dark: '深色',
}
+const profile = {
+ profile: '用户信息',
+ logout: '退出登录',
+}
+
+const menu = {
+ home: '首页',
+ project: '项目管理',
+ resources: '资源中心',
+ datasource: '数据源中心',
+ monitor: '监控中心',
+ security: '安全中心',
+ workflow_monitoring: '工作流监控',
+ workflow_relationships: '工作流关系',
+ workflow: '工作流',
+ workflow_definition: '工作流定义',
+ workflow_instance: '工作流实例',
+ task_instance: '任务实例',
+ task_definition: '任务定义',
+ file_manage: '文件管理',
+ udf_manage: 'UDF管理',
+ resource_manage: '资源管理',
+ function_manage: '函数管理',
+ service_manage: '服务管理',
+ master: 'Master',
+ worker: 'Worker',
+ db: 'DB',
+ statistical_manage: '统计管理',
+ statistics: 'Statistics',
+ tenant_manage: '租户管理',
+ user_manage: '用户管理',
+ alarm_group_manage: '告警组管理',
+ alarm_instance_manage: '告警实例管理',
+ worker_group_manage: 'Worker分组管理',
+ yarn_queue_manage: 'Yarn队列管理',
+ environmental_manage: '环境管理',
+ token_manage: '令牌管理',
+}
+
export default {
login,
theme,
+ profile,
+ menu,
}
diff --git a/dolphinscheduler-ui-next/src/views/home/index.module.scss
b/dolphinscheduler-ui-next/src/views/home/index.module.scss
index cf9cc8d..3e7c6c2 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.module.scss
+++ b/dolphinscheduler-ui-next/src/views/home/index.module.scss
@@ -14,11 +14,3 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-.container {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100vh;
-}
\ No newline at end of file
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx
b/dolphinscheduler-ui-next/src/views/home/index.tsx
index 35d63d1..2f3b047 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/views/home/index.tsx
@@ -16,7 +16,6 @@
*/
import { defineComponent } from 'vue'
-import styles from './index.module.scss'
import Card from '@/components/card'
import PieChart from '@/components/chart/modules/Pie'
import GaugeChart from '@/components/chart/modules/Gauge'
@@ -27,7 +26,7 @@ export default defineComponent({
setup() {},
render() {
return (
- <div class={styles.container}>
+ <div>
<Card title='test'>{{ default: () => <PieChart /> }}</Card>
<Card title='test'>{{ default: () => <GaugeChart /> }}</Card>
<Card title='test'>{{ default: () => <BarChart /> }}</Card>
