From b2852a716f13b2d8b4b2234e21e9c39e51452bf2 Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Fri, 24 Dec 2021 16:11:55 +0800 Subject: [PATCH] [Feature][UI Next] Add charts i18n. (#7568) --- .../src/components/chart/index.ts | 17 +- .../basic/components/header/index.module.scss | 52 ---- .../layouts/basic/components/header/index.tsx | 106 -------- .../basic/components/logo/index.module.scss | 36 --- .../layouts/basic/components/logo/index.tsx | 34 --- .../basic/components/sider/index.module.scss | 19 -- .../layouts/basic/components/sider/index.tsx | 78 ------ .../src/layouts/basic/index.module.scss | 54 ---- .../src/layouts/basic/index.tsx | 234 ------------------ .../components/language/use-dataList.ts | 10 +- .../components/language/use-dropdown.ts | 6 +- .../content/components/navbar/use-dataList.ts | 19 +- .../components/navbar/use-menuClick.ts | 4 +- .../content/components/user/use-dataList.ts | 12 +- .../content/components/user/use-dropdown.ts | 2 +- 15 files changed, 46 insertions(+), 637 deletions(-) delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/components/header/index.module.scss delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/components/header/index.tsx delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.module.scss delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.tsx delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.module.scss delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/index.module.scss delete mode 100644 dolphinscheduler-ui-next/src/layouts/basic/index.tsx diff --git a/dolphinscheduler-ui-next/src/components/chart/index.ts b/dolphinscheduler-ui-next/src/components/chart/index.ts index c7c14bcbba..2dac9dee39 100644 --- a/dolphinscheduler-ui-next/src/components/chart/index.ts +++ b/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( ): 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( } ) + watch( + () => locale.value, + () => { + chart?.dispose() + init() + } + ) + onMounted(() => { init() addEventListener('resize', resize) diff --git a/dolphinscheduler-ui-next/src/layouts/basic/components/header/index.module.scss b/dolphinscheduler-ui-next/src/layouts/basic/components/header/index.module.scss deleted file mode 100644 index 5778faed18..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/components/header/index.module.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/dolphinscheduler-ui-next/src/layouts/basic/components/header/index.tsx b/dolphinscheduler-ui-next/src/layouts/basic/components/header/index.tsx deleted file mode 100644 index 2938ee1065..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/components/header/index.tsx +++ /dev/null @@ -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 ( - - -
- -
- - - 中文 - - - - - - - - - - - admin - - - - - -
-
- - ) - }, -}) - -export { Header } diff --git a/dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.module.scss b/dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.module.scss deleted file mode 100644 index d7891cb72b..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.module.scss +++ /dev/null @@ -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; - } -} diff --git a/dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.tsx b/dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.tsx deleted file mode 100644 index 459bf3cf86..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.tsx +++ /dev/null @@ -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 ( -
- -
- ) - }, -}) - -export default Logo diff --git a/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.module.scss b/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.module.scss deleted file mode 100644 index 9a5d1a3a4e..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.module.scss +++ /dev/null @@ -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 { -} diff --git a/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx b/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx deleted file mode 100644 index d901ca4438..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/components/sider/index.tsx +++ /dev/null @@ -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 ? ( - - - - ) : ( - '' - ) - }, -}) - -export { Sider } diff --git a/dolphinscheduler-ui-next/src/layouts/basic/index.module.scss b/dolphinscheduler-ui-next/src/layouts/basic/index.module.scss deleted file mode 100644 index e7c05894e6..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/index.module.scss +++ /dev/null @@ -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; - } - } - } - } -} diff --git a/dolphinscheduler-ui-next/src/layouts/basic/index.tsx b/dolphinscheduler-ui-next/src/layouts/basic/index.tsx deleted file mode 100644 index 09820e0b47..0000000000 --- a/dolphinscheduler-ui-next/src/layouts/basic/index.tsx +++ /dev/null @@ -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 ( - -
- - - - - - - - ) - }, -}) - -export default basic diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts index 29068f0e5b..ef7f502b07 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dataList.ts +++ b/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, } } diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts b/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts index 77f69e7cac..5585516b5d 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/language/use-dropdown.ts +++ b/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, } } diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts index 66a3a79f2c..dff304614d 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/use-dataList.ts +++ b/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, } } 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 5c1d6cbbf4..8804db7851 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 @@ -17,7 +17,7 @@ import { useRouter } from 'vue-router' import type { Router } from 'vue-router' -import { MenuOption } from 'naive-ui' +import { MenuOption } from 'naive-ui' export function useMenuClick() { const router: Router = useRouter() @@ -28,6 +28,6 @@ export function useMenuClick() { } return { - handleMenuClick + handleMenuClick, } } diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts b/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts index c3941f32d6..ddc23c1a25 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dataList.ts +++ b/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) }) } @@ -38,12 +36,12 @@ export function useDataList() { icon: renderIcon(LogoutOutlined), }, ] - + const state = reactive({ - profileOptions: profileOptions + profileOptions: profileOptions, }) return { - state + state, } } diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts b/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts index 2d93f134eb..406c945113 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/user/use-dropdown.ts +++ b/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, } }