[Feature][UI Next]Modify Layout in multiple languages (#7830)

* Rewrite the page as defineComponent

* Fixed layout multilanguage problem

* Fixed layout multilanguage problem

* Modify the fields

* License

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

@@ -22,7 +22,7 @@ export function useDropDown(chooseVal: any) {
   const { locale } = useI18n()
 
   const handleSelect = (key: string | number, option: DropdownOption) => {
-    console.log(key, option)
+    // console.log(key, option)
     chooseVal.value = option.label
     locale.value = key as string
   }

dolphinscheduler-ui-next/src/layouts/content/components/sidebar/index.tsx

@@ -29,7 +29,6 @@ const Sidebar = defineComponent({
   },
   setup() {},
   render() {
-    console.log('props', this)
     const collapsedRef = ref(false)
     const defaultExpandedKeys = [
       'workflow',
@@ -54,7 +53,7 @@ const Sidebar = defineComponent({
         />
       </NLayoutSider>
     )
-  },
+  }
 })
 
 export default Sidebar

dolphinscheduler-ui-next/src/layouts/content/index.tsx

@@ -15,55 +15,68 @@
  * limitations under the License.
  */
 
-import { defineComponent, ref, watch } from 'vue'
+import { defineComponent, onMounted, watch, toRefs } from 'vue'
 import { NLayout, NLayoutContent, NLayoutHeader } from 'naive-ui'
 import NavBar from './components/navbar'
 import SideBar from './components/sidebar'
 import { useDataList } from './use-dataList'
-import { useLanguageStore } from '@/store/language/language'
+import { useMenuStore } from '@/store/menu/menu'
 import { useI18n } from 'vue-i18n'
 
 const Content = defineComponent({
   name: 'Content',
   setup() {
-    const languageStore = useLanguageStore()
+    const menuStore = useMenuStore()
+    const { state, changeMenuOption, changeHeaderMenuOptions } = useDataList()
 
-    watch(useI18n().locale, () => {
-      console.log(123)
+    onMounted(() => {
+      menuStore.setMenuKey('home')
+      changeMenuOption(state)
+      changeHeaderMenuOptions(state)
+      genSideMenu(state)
     })
 
-    return { languageStore }
-  },
-  render() {
-    const { state, getHeaderMenuOptions } = useDataList()
-
-    const headerMenuOptions = getHeaderMenuOptions(state.menuOptions)
+    watch(useI18n().locale, () => {
+      changeMenuOption(state)
+      changeHeaderMenuOptions(state)
+      genSideMenu(state)
+    })
 
-    const sideMenuOptions = ref()
+    const genSideMenu = (state: any) => {
+      const key = menuStore.getMenuKey
+      state.sideMenuOptions =
+        state.menuOptions.filter((menu: { key: string }) => menu.key === key)[0].children || []
+      state.isShowSide = state.sideMenuOptions.length !== 0
+    }
 
     const getSideMenuOptions = (item: any) => {
-      this.languageStore.setMenuKey(item.key)
-      sideMenuOptions.value =
-        state.menuOptions.filter((menu) => menu.key === item.key)[0].children ||
-        []
-      state.isShowSide = sideMenuOptions.value.length !== 0
+      menuStore.setMenuKey(item.key)
+      genSideMenu(state)
     }
 
+    return {
+      ...toRefs(state),
+      menuStore,
+      changeMenuOption,
+      getSideMenuOptions
+    }
+  },
+  render() {
     return (
-      <NLayout style='height: 100%;'>
-        <NLayoutHeader style='height: 65px;'>
+      <NLayout style='height: 100%'>
+        <NLayoutHeader style='height: 65px'>
           <NavBar
-            onHandleMenuClick={getSideMenuOptions}
-            headerMenuOptions={headerMenuOptions}
-            languageOptions={state.languageOptions}
-            profileOptions={state.userDropdownOptions}
+            onHandleMenuClick={this.getSideMenuOptions}
+            headerMenuOptions={this.headerMenuOptions}
+            languageOptions={this.languageOptions}
+            profileOptions={this.userDropdownOptions}
           />
         </NLayoutHeader>
-        <NLayout has-sider position='absolute' style='top: 65px;'>
-          {state.isShowSide && (
-            <SideBar sideMenuOptions={sideMenuOptions.value} />
+        <NLayout has-sider position='absolute' style='top: 65px'>
+          {this.isShowSide && (
+            <SideBar sideMenuOptions={this.sideMenuOptions} />
           )}
-          <NLayoutContent native-scrollbar={false} style='padding: 16px 22px;'>
+          <NLayoutContent native-scrollbar={false} style='padding: 16px 22px'>
             <router-view />
           </NLayoutContent>
         </NLayout>

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

@@ -3,13 +3,13 @@
  * 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 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,
+ * 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.
@@ -51,170 +51,6 @@ export function useDataList() {
     return () => h(NIcon, null, { default: () => h(icon) })
   }
 
-  const menuOptions = [
-    {
-      label: t('menu.home'),
-      key: 'home',
-      icon: renderIcon(HomeOutlined),
-    },
-    {
-      label: t('menu.project'),
-      key: 'project',
-      icon: renderIcon(ProfileOutlined),
-      children: [
-        {
-          label: t('menu.workflow_monitoring'),
-          key: 'workflow-monitoring',
-          icon: renderIcon(FundProjectionScreenOutlined),
-        },
-        {
-          label: t('menu.workflow_relationships'),
-          key: 'workflow-relationships',
-          icon: renderIcon(PartitionOutlined),
-        },
-        {
-          label: t('menu.workflow'),
-          key: 'workflow',
-          icon: renderIcon(SettingOutlined),
-          children: [
-            {
-              label: t('menu.workflow_definition'),
-              key: 'workflow-definition',
-            },
-            {
-              label: t('menu.workflow_instance'),
-              key: 'workflow-instance',
-            },
-            {
-              label: t('menu.task_instance'),
-              key: 'task-instance',
-            },
-            {
-              label: t('menu.task_definition'),
-              key: 'task-definition',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: t('menu.resources'),
-      key: 'resources',
-      icon: renderIcon(FolderOutlined),
-      children: [
-        {
-          label: t('menu.file_manage'),
-          key: 'file-manage',
-          icon: renderIcon(FileSearchOutlined),
-        },
-        {
-          label: t('menu.udf_manage'),
-          key: 'udf-manage',
-          icon: renderIcon(RobotOutlined),
-          children: [
-            {
-              label: t('menu.resource_manage'),
-              key: 'resource-manage',
-            },
-            {
-              label: t('menu.function_manage'),
-              key: 'function-manage',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: t('menu.datasource'),
-      key: 'datasource',
-      icon: renderIcon(DatabaseOutlined),
-    },
-    {
-      label: t('menu.monitor'),
-      key: 'monitor',
-      icon: renderIcon(DesktopOutlined),
-      children: [
-        {
-          label: t('menu.service_manage'),
-          key: 'service-manage',
-          icon: renderIcon(AppstoreOutlined),
-          children: [
-            {
-              label: t('menu.master'),
-              key: 'master',
-            },
-            {
-              label: t('menu.worker'),
-              key: 'worker',
-            },
-            {
-              label: t('menu.db'),
-              key: 'db',
-            },
-          ],
-        },
-        {
-          label: t('menu.statistical_manage'),
-          key: 'statistical-manage',
-          icon: renderIcon(AppstoreOutlined),
-          children: [
-            {
-              label: t('menu.statistics'),
-              key: 'statistics',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: t('menu.security'),
-      key: 'security',
-      icon: renderIcon(SafetyCertificateOutlined),
-      children: [
-        {
-          label: t('menu.tenant_manage'),
-          key: 'tenant-manage',
-          icon: renderIcon(UsergroupAddOutlined),
-        },
-        {
-          label: t('menu.user_manage'),
-          key: 'user-manage',
-          icon: renderIcon(UserAddOutlined),
-        },
-        {
-          label: t('menu.alarm_group_manage'),
-          key: 'alarm-group-manage',
-          icon: renderIcon(WarningOutlined),
-        },
-        {
-          label: t('menu.alarm_instance_manage'),
-          key: 'alarm-instance-manage',
-          icon: renderIcon(InfoCircleOutlined),
-        },
-        {
-          label: t('menu.worker_group_manage'),
-          key: 'worker-group-manage',
-          icon: renderIcon(ControlOutlined),
-        },
-        {
-          label: t('menu.yarn_queue_manage'),
-          key: 'yarn-queue-manage',
-          icon: renderIcon(SlackOutlined),
-        },
-        {
-          label: t('menu.environmental_manage'),
-          key: 'environmental-manage',
-          icon: renderIcon(EnvironmentOutlined),
-        },
-        {
-          label: t('menu.token_manage'),
-          key: 'token-manage',
-          icon: renderIcon(SafetyOutlined),
-        },
-      ],
-    },
-  ]
-
   const languageOptions = [
     {
       label: 'English',
@@ -244,9 +80,183 @@ export function useDataList() {
     },
   ]
 
-  const getHeaderMenuOptions = (MenuOptions: any) => {
-    let headerMenuOptions = []
-    headerMenuOptions = MenuOptions.map(
+  const state = reactive({
+    isShowSide: false,
+    languageOptions,
+    userDropdownOptions,
+    menuOptions: [],
+    headerMenuOptions: [],
+    sideMenuOptions: []
+  })
+
+  const changeMenuOption = (state: any) => {
+    state.menuOptions = [
+      {
+        label: t('menu.home'),
+        key: 'home',
+        icon: renderIcon(HomeOutlined),
+      },
+      {
+        label: t('menu.project'),
+        key: 'project',
+        icon: renderIcon(ProfileOutlined),
+        children: [
+          {
+            label: t('menu.workflow_monitoring'),
+            key: 'workflow-monitoring',
+            icon: renderIcon(FundProjectionScreenOutlined),
+          },
+          {
+            label: t('menu.workflow_relationships'),
+            key: 'workflow-relationships',
+            icon: renderIcon(PartitionOutlined),
+          },
+          {
+            label: t('menu.workflow'),
+            key: 'workflow',
+            icon: renderIcon(SettingOutlined),
+            children: [
+              {
+                label: t('menu.workflow_definition'),
+                key: 'workflow-definition',
+              },
+              {
+                label: t('menu.workflow_instance'),
+                key: 'workflow-instance',
+              },
+              {
+                label: t('menu.task_instance'),
+                key: 'task-instance',
+              },
+              {
+                label: t('menu.task_definition'),
+                key: 'task-definition',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: t('menu.resources'),
+        key: 'resources',
+        icon: renderIcon(FolderOutlined),
+        children: [
+          {
+            label: t('menu.file_manage'),
+            key: 'file-manage',
+            icon: renderIcon(FileSearchOutlined),
+          },
+          {
+            label: t('menu.udf_manage'),
+            key: 'udf-manage',
+            icon: renderIcon(RobotOutlined),
+            children: [
+              {
+                label: t('menu.resource_manage'),
+                key: 'resource-manage',
+              },
+              {
+                label: t('menu.function_manage'),
+                key: 'function-manage',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: t('menu.datasource'),
+        key: 'datasource',
+        icon: renderIcon(DatabaseOutlined),
+      },
+      {
+        label: t('menu.monitor'),
+        key: 'monitor',
+        icon: renderIcon(DesktopOutlined),
+        children: [
+          {
+            label: t('menu.service_manage'),
+            key: 'service-manage',
+            icon: renderIcon(AppstoreOutlined),
+            children: [
+              {
+                label: t('menu.master'),
+                key: 'master',
+              },
+              {
+                label: t('menu.worker'),
+                key: 'worker',
+              },
+              {
+                label: t('menu.db'),
+                key: 'db',
+              },
+            ],
+          },
+          {
+            label: t('menu.statistical_manage'),
+            key: 'statistical-manage',
+            icon: renderIcon(AppstoreOutlined),
+            children: [
+              {
+                label: t('menu.statistics'),
+                key: 'statistics',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: t('menu.security'),
+        key: 'security',
+        icon: renderIcon(SafetyCertificateOutlined),
+        children: [
+          {
+            label: t('menu.tenant_manage'),
+            key: 'tenant-manage',
+            icon: renderIcon(UsergroupAddOutlined),
+          },
+          {
+            label: t('menu.user_manage'),
+            key: 'user-manage',
+            icon: renderIcon(UserAddOutlined),
+          },
+          {
+            label: t('menu.alarm_group_manage'),
+            key: 'alarm-group-manage',
+            icon: renderIcon(WarningOutlined),
+          },
+          {
+            label: t('menu.alarm_instance_manage'),
+            key: 'alarm-instance-manage',
+            icon: renderIcon(InfoCircleOutlined),
+          },
+          {
+            label: t('menu.worker_group_manage'),
+            key: 'worker-group-manage',
+            icon: renderIcon(ControlOutlined),
+          },
+          {
+            label: t('menu.yarn_queue_manage'),
+            key: 'yarn-queue-manage',
+            icon: renderIcon(SlackOutlined),
+          },
+          {
+            label: t('menu.environmental_manage'),
+            key: 'environmental-manage',
+            icon: renderIcon(EnvironmentOutlined),
+          },
+          {
+            label: t('menu.token_manage'),
+            key: 'token-manage',
+            icon: renderIcon(SafetyOutlined),
+          },
+        ],
+      },
+    ]
+  }
+
+  const changeHeaderMenuOptions = (state: any) => {
+    state.headerMenuOptions = state.menuOptions.map(
       (item: { label: string; key: string; icon: any }) => {
         return {
           label: item.label,
@@ -255,18 +265,11 @@ export function useDataList() {
         }
       }
     )
-    return headerMenuOptions
   }
 
-  const state = reactive({
-    isShowSide: false,
-    menuOptions,
-    languageOptions,
-    userDropdownOptions,
-  })
-
   return {
     state,
-    getHeaderMenuOptions,
+    changeHeaderMenuOptions,
+    changeMenuOption
   }
 }

dolphinscheduler-ui-next/src/service/service.ts

@@ -44,7 +44,7 @@ const err = (err: AxiosError): Promise<AxiosError> => {
 }
 
 service.interceptors.request.use((config: AxiosRequestConfig<any>) => {
-  console.log('config', config)
+  // console.log('config', config)
 
   config.headers && (config.headers.sessionId = userStore.getSessionId)
 

dolphinscheduler-ui-next/src/store/language/language.ts

@@ -16,11 +16,11 @@
  */
 
 import { defineStore } from 'pinia'
-import LanguageState from './types'
+import MenuState from './types'
 
-export const useLanguageStore = defineStore({
-  id: 'language',
-  state: (): LanguageState => ({
+export const useMenuStore = defineStore({
+  id: 'menu',
+  state: (): MenuState => ({
     menuKey: '',
   }),
   getters: {

dolphinscheduler-ui-next/src/store/language/types.ts

@@ -15,8 +15,8 @@
  * limitations under the License.
  */
 
-interface LanguageState {
+interface MenuState {
   menuKey: string
 }
 
-export default LanguageState
+export default MenuState

dolphinscheduler-ui-next/src/views/login/use-translate.ts

@@ -19,7 +19,7 @@ import { WritableComputedRef } from 'vue'
 
 export function useTranslate(locale: WritableComputedRef<string>) {
   const handleChange = (value: string) => {
-    console.log('value', value)
+    // console.log('value', value)
     locale.value = value
   }
   return {