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

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)

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;
-      }
-    }
-  }
-}

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 }

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;
-  }
-}

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

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 {
-}

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 }

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;
-        }
-      }
-    }
-  }
-}

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

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,
   }
 }

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,
   }
 }

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,
   }
 }

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,
   }
 }

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,
   }
 }

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,
   }
 }