Browse Source

[Feature][UI Next] Add charts i18n. (#7568)

3.0.0/version-upgrade
songjianet 3 years ago committed by GitHub
parent
commit
b2852a716f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 17
      dolphinscheduler-ui-next/src/components/chart/index.ts
  2. 52
      dolphinscheduler-ui-next/src/layouts/basic/components/header/index.module.scss
  3. 106
      dolphinscheduler-ui-next/src/layouts/basic/components/header/index.tsx
  4. 36
      dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.module.scss
  5. 34
      dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.tsx
  6. 19
      dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.module.scss
  7. 78
      dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx
  8. 54
      dolphinscheduler-ui-next/src/layouts/basic/index.module.scss
  9. 234
      dolphinscheduler-ui-next/src/layouts/basic/index.tsx
  10. 8
      dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts
  11. 6
      dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts
  12. 17
      dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts
  13. 2
      dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts
  14. 10
      dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts
  15. 2
      dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts

17
dolphinscheduler-ui-next/src/components/chart/index.ts

@ -15,9 +15,15 @@
* limitations under the License.
*/
import { getCurrentInstance, onMounted, onBeforeUnmount, watch } from 'vue'
import {
getCurrentInstance,
onMounted,
onBeforeUnmount,
watch,
} from 'vue'
import { useThemeStore } from '@/store/theme/theme'
import { throttle } from 'echarts'
import { useI18n } from 'vue-i18n'
import type { Ref } from 'vue'
import type { ECharts } from 'echarts'
import type { ECBasicOption } from 'echarts/types/dist/shared'
@ -28,6 +34,7 @@ function initChart<Opt extends ECBasicOption>(
): ECharts | null {
let chart: ECharts | null = null
const themeStore = useThemeStore()
const { locale } = useI18n()
const globalProperties =
getCurrentInstance()?.appContext.config.globalProperties
@ -51,6 +58,14 @@ function initChart<Opt extends ECBasicOption>(
}
)
watch(
() => locale.value,
() => {
chart?.dispose()
init()
}
)
onMounted(() => {
init()
addEventListener('resize', resize)

52
dolphinscheduler-ui-next/src/layouts/basic/components/header/index.module.scss

@ -1,52 +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.
*/
.header-model {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px;
position: relative;
width: 100%;
padding: 0px;
margin: 0px;
.nav {
display: flex;
justify-content: space-between;
align-items: center;
width: inherit;
.menu {
margin-left: 0px;
text-align: center;
font-size: 15px;
color: rgb(255, 255, 255);
}
.profile {
width: 135px;
display: flex;
justify-content: space-between;
margin-right: 20px;
text-align: center;
.icon {
margin-right: 5px;
display: inline-flex;
align-items: center;
}
}
}
}

106
dolphinscheduler-ui-next/src/layouts/basic/components/header/index.tsx

@ -1,106 +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 { defineComponent, ref } from 'vue'
import styles from './index.module.scss'
import { NDropdown, NIcon, NLayoutHeader, NMenu } from 'naive-ui'
import Logo from '@/layouts/basic/components/logo'
import { IosArrowDown } from '@vicons/ionicons4'
import { UserAlt } from '@vicons/fa'
const Header = defineComponent({
name: 'Header',
props: {
inverted: {
type: Boolean,
default: true,
},
menuOptions: {
type: Array,
default: [],
},
languageOptions: {
type: Array,
default: [],
},
profileOptions: {
type: Array,
default: [],
},
currentMenu: {
type: Object,
},
defaultMenuKey: {
type: String,
},
},
setup(props, context) {
const currentMenuRef = ref({})
const handleMenuClick = (key, data) => {
currentMenuRef.value = data
context.emit('menuClick', data)
}
return { handleMenuClick }
},
render() {
return (
<NLayoutHeader
class={styles['header-model']}
inverted={this.inverted}
bordered
>
<Logo />
<div class={styles.nav}>
<NMenu
mode='horizontal'
onUpdate:value={this.handleMenuClick}
defaultValue={this.defaultMenuKey}
class={styles.menu}
inverted={this.inverted}
options={this.menuOptions}
/>
<div class={styles.profile}>
<NDropdown inverted={this.inverted} options={this.languageOptions}>
<span>
<NIcon class={styles.icon}>
<IosArrowDown />
</NIcon>
</span>
</NDropdown>
<NDropdown inverted={this.inverted} options={this.profileOptions}>
<span>
<NIcon class={styles.icon}>
<UserAlt />
</NIcon>
admin
<NIcon class={styles.icon}>
<IosArrowDown />
</NIcon>
</span>
</NDropdown>
</div>
</div>
</NLayoutHeader>
)
},
})
export { Header }

36
dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.module.scss

@ -1,36 +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.
*/
.logo {
display: flex;
align-items: center;
justify-content: center;
height: 64px;
line-height: 64px;
overflow: hidden;
white-space: nowrap;
width: 280px;
img {
width: auto;
height: 46px;
}
.title {
margin-bottom: 0;
}
}

34
dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.tsx

@ -1,34 +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 { defineComponent } from 'vue'
import styles from './index.module.scss'
const Logo = defineComponent({
name: 'Logo',
setup() {},
render() {
return (
<div class={styles.logo}>
<img src='./src/assets/images/nav-logo.svg' alt='' />
</div>
)
},
})
export default Logo

19
dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.module.scss

@ -1,19 +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.
*/
.sider-model {
}

78
dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx

@ -1,78 +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 { defineComponent, ref } from 'vue'
import { NLayoutSider, NMenu } from 'naive-ui'
const Sider = defineComponent({
name: 'Sider',
props: {
visible: {
type: Boolean,
default: true,
},
inverted: {
type: Boolean,
default: true,
},
menuOptions: {
type: Array,
default: [],
},
currentMenu: {
type: Object,
},
defaultMenuKey: {
type: String,
},
},
setup(props) {
const currentMenuRef = ref({})
const handleMenuClick = (key, data) => {
currentMenuRef.value = data
}
return { handleMenuClick }
},
render() {
return
this.visible ? (
<NLayoutSider
width={240}
collapseMode={'width'}
collapsedWidth={64}
inverted={this.inverted}
nativeScrollbar={false}
show-trigger
bordered
>
<NMenu
onUpdate:value={this.handleMenuClick}
inverted={this.inverted}
collapsedWidth={64}
collapsedIconSize={22}
options={this.menuOptions}
/>
</NLayoutSider>
) : (
''
)
},
})
export { Sider }

54
dolphinscheduler-ui-next/src/layouts/basic/index.module.scss

@ -1,54 +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.
*/
.container {
.header-model {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px;
position: relative;
width: 100%;
padding: 0px;
margin: 0px;
.nav {
display: flex;
justify-content: space-between;
align-items: center;
width: inherit;
.menu {
margin-left: 0px;
text-align: center;
font-size: 15px;
color: rgb(255, 255, 255);
}
.profile {
width: 135px;
display: flex;
justify-content: space-between;
margin-right: 20px;
text-align: center;
.icon {
margin-right: 5px;
display: inline-flex;
align-items: center;
}
}
}
}
}

234
dolphinscheduler-ui-next/src/layouts/basic/index.tsx

@ -1,234 +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 { h, defineComponent, ref } from 'vue'
import styles from './index.module.scss'
import { useI18n } from 'vue-i18n'
import {
PersonCircleOutline,
LogOutOutline,
FileTrayFullOutline,
Server,
SettingsOutline,
} from '@vicons/ionicons5'
import {
HomeOutlined,
FolderOutlined,
SafetyCertificateOutlined,
UserOutlined,
} from '@vicons/antd'
import { Database, Notes, Users } from '@vicons/tabler'
import { MonitorFilled, AcUnitOutlined } from '@vicons/material'
import { Flow } from '@vicons/carbon'
import { Header } from './components/header'
import { Sider } from './components/sider'
import { NLayout, NLayoutContent, NIcon } from 'naive-ui'
function renderIcon(icon) {
return () => h(NIcon, null, { default: () => h(icon) })
}
const switchLanguageOptions = [
{
label: 'English',
key: 'en',
},
{
label: '中文',
key: 'zh',
},
]
const profileOptions = [
{
label: '用户信息',
key: 'profile',
icon: renderIcon(PersonCircleOutline),
},
{
label: '退出登录',
key: 'logout',
icon: renderIcon(LogOutOutline),
},
]
const menuOptions = [
{
label: '首页',
key: 'home',
icon: renderIcon(HomeOutlined),
},
{
label: '项目管理',
key: 'project',
icon: renderIcon(Notes),
children: [
{
label: '项目',
key: 'projects-list',
icon: renderIcon(Notes),
},
{
label: '工作流监控',
key: 'projects-index',
icon: renderIcon(Flow),
},
],
},
{
label: '资源中心',
key: 'resources',
icon: renderIcon(FolderOutlined),
children: [
{
label: '文件管理',
key: 'file',
icon: renderIcon(FileTrayFullOutline),
},
{
label: '创建资源',
key: 'resource-file-create',
icon: renderIcon(AcUnitOutlined),
},
],
},
{
label: '数据源中心',
key: 'datasource',
icon: renderIcon(Database),
children: [
{
label: '数据源中心',
key: 'datasource-list',
icon: renderIcon(Database),
},
],
},
{
label: '监控中心',
key: 'monitor',
icon: renderIcon(MonitorFilled),
children: [
{
key: 'servers-master',
title: '服务管理-Master',
icon: renderIcon(Server),
},
{
key: 'servers-worker',
title: '服务管理-Worker',
icon: renderIcon(SettingsOutline),
},
],
},
{
label: '安全中心',
key: 'security',
icon: renderIcon(SafetyCertificateOutlined),
children: [
{
key: 'tenement-manage',
label: '租户管理',
icon: renderIcon(UserOutlined),
},
{
key: 'users-manage',
label: '用户管理',
icon: renderIcon(Users),
},
],
},
]
const basic = defineComponent({
name: 'basic',
setup() {
const invertedRef = ref(true)
const hasSiderRef = ref(false)
const defaultMenuKeyRef = ref('home')
const currentMenuRef = ref({})
const topMenuOptionsRef = ref([])
const sideMenuOptionsRef = ref([])
const handleTopMenuClick = (data) => {
currentMenuRef.value = data
generateMenus()
}
const handleSideMenuClick = (key, data) => {
console.log(data)
}
const generateMenus = () => {
topMenuOptionsRef.value = []
sideMenuOptionsRef.value = []
hasSiderRef.value = false
menuOptions.forEach((option) => {
topMenuOptionsRef.value.push({
label: option.label,
key: option.key,
icon: option.icon,
})
if (
currentMenuRef.value.key === option.key ||
defaultMenuKeyRef.value === option.key
) {
if (option.hasOwnProperty('children') && option.children) {
sideMenuOptionsRef.value = option.children
hasSiderRef.value = true
}
}
})
}
generateMenus()
return {
topMenuOptionsRef,
sideMenuOptionsRef,
invertedRef,
hasSiderRef,
defaultMenuKeyRef,
handleTopMenuClick,
handleSideMenuClick,
}
},
render() {
return (
<NLayout class={styles.container}>
<Header
languageOptions={switchLanguageOptions}
profileOptions={profileOptions}
menuOptions={this.topMenuOptionsRef}
inverted={this.invertedRef}
defaultMenuKey={this.defaultMenuKeyRef}
onMenuClick={this.handleTopMenuClick}
/>
<NLayout hasSider>
<Sider
visible={this.hasSiderRef}
inverted={this.invertedRef}
menuOptions={this.sideMenuOptionsRef}
/>
<NLayoutContent>
<router-view />
</NLayoutContent>
</NLayout>
</NLayout>
)
},
})
export default basic

8
dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts

@ -21,20 +21,20 @@ export function useDataList() {
const languageOptions = [
{
label: 'English',
key: 'en',
key: 'en_US',
},
{
label: '中文',
key: 'zh',
key: 'zh_CN',
},
]
const state = reactive({
chooseVal: ref('中文'),
languageOptions: languageOptions
languageOptions: languageOptions,
})
return {
state
state,
}
}

6
dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts

@ -16,13 +16,17 @@
*/
import { DropdownOption } from 'naive-ui'
import { useI18n } from 'vue-i18n'
export function useDropDown(state: any) {
const { locale } = useI18n()
const handleSelect = (key: string | number, option: DropdownOption) => {
console.log(key, option)
state.chooseVal = option.label
locale.value = key as string
}
return {
handleSelect
handleSelect,
}
}

17
dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts

@ -18,11 +18,16 @@
import { reactive, ref, h } from 'vue'
import { NIcon } from 'naive-ui'
import {
HomeOutlined, ProfileOutlined, FolderOutlined, DatabaseOutlined, DesktopOutlined, SafetyCertificateOutlined
HomeOutlined,
ProfileOutlined,
FolderOutlined,
DatabaseOutlined,
DesktopOutlined,
SafetyCertificateOutlined,
} from '@vicons/antd'
export function useDataList() {
const renderIcon = (icon:any) => {
const renderIcon = (icon: any) => {
return () => h(NIcon, null, { default: () => h(icon) })
}
@ -35,7 +40,7 @@ export function useDataList() {
{
label: '项目管理',
key: 'project',
icon: renderIcon(ProfileOutlined)
icon: renderIcon(ProfileOutlined),
},
{
label: '资源中心',
@ -56,15 +61,15 @@ export function useDataList() {
label: '安全中心',
key: 'security',
icon: renderIcon(SafetyCertificateOutlined),
}
},
]
const state = reactive({
activeKey: ref('home'),
menuOptions: menuOptions
menuOptions: menuOptions,
})
return {
state
state,
}
}

2
dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-menuClick.ts

@ -28,6 +28,6 @@ export function useMenuClick() {
}
return {
handleMenuClick
handleMenuClick,
}
}

10
dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts

@ -17,12 +17,10 @@
import { reactive, ref, h } from 'vue'
import { NIcon } from 'naive-ui'
import {
UserOutlined, LogoutOutlined
} from '@vicons/antd'
import { UserOutlined, LogoutOutlined } from '@vicons/antd'
export function useDataList() {
const renderIcon = (icon:any) => {
const renderIcon = (icon: any) => {
return () => h(NIcon, null, { default: () => h(icon) })
}
@ -40,10 +38,10 @@ export function useDataList() {
]
const state = reactive({
profileOptions: profileOptions
profileOptions: profileOptions,
})
return {
state
state,
}
}

2
dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts

@ -22,6 +22,6 @@ export function useDropDown() {
console.log(key, option)
}
return {
handleSelect
handleSelect,
}
}

Loading…
Cancel
Save