[Feature][UI] Revamped interface settings options in the top navigation bar. (#12530)

dolphinscheduler-ui/src/layouts/content/components/navbar/index.module.scss

@@ -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.
- */
-
-.container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 64px;
-  border-bottom: 1px solid var(--n-border-color);
-
-  .nav {
-    margin-left: 12px;
-  }
-
-  .settings {
-    display: flex;
-    flex: 1;
-    justify-content: flex-end;
-  }
-}

dolphinscheduler-ui/src/layouts/content/components/navbar/index.tsx

@@ -17,8 +17,9 @@
 
 import { defineComponent, PropType, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import styles from './index.module.scss'
-import { NMenu } from 'naive-ui'
+import { SettingOutlined } from '@vicons/antd'
+import { useI18n } from 'vue-i18n'
+import { NMenu, NSpace, NButton, NIcon } from 'naive-ui'
 import Logo from '../logo'
 import Locales from '../locales'
 import Timezone from '../timezone'
@@ -48,13 +49,17 @@ const Navbar = defineComponent({
   setup() {
     const route = useRoute()
     const router = useRouter()
-
+    const { t } = useI18n()
     const menuKey = ref(route.meta.activeMenu as string)
 
     const handleMenuClick = (key: string) => {
       router.push({ path: `/${key}` })
     }
 
+    const handleUISettingClick = () => {
+      router.push({ path: '/ui-setting' })
+    }
+
     watch(
       () => route.path,
       () => {
@@ -62,27 +67,37 @@ const Navbar = defineComponent({
       }
     )
 
-    return { handleMenuClick, menuKey }
+    return { handleMenuClick, handleUISettingClick, menuKey, t }
   },
   render() {
     return (
-      <div class={styles.container}>
-        <Logo />
-        <div class={styles.nav}>
-          <NMenu
-            value={this.menuKey}
-            mode='horizontal'
-            options={this.headerMenuOptions}
-            onUpdateValue={this.handleMenuClick}
-          />
-        </div>
-        <div class={styles.settings}>
+      <NSpace style='height: 65px' justify='space-between' align='center'>
+        <NSpace align='center'>
+          <NSpace>
+            <Logo />
+            <NMenu
+              value={this.menuKey}
+              mode='horizontal'
+              options={this.headerMenuOptions}
+              onUpdateValue={this.handleMenuClick}
+            />
+          </NSpace>
+        </NSpace>
+        <NSpace align='center'>
+          <NButton quaternary onClick={this.handleUISettingClick}>
+            {{
+              icon: () => <NIcon size='16'>
+                <SettingOutlined />
+              </NIcon>,
+              default: this.t('menu.ui_setting')
+            }}
+          </NButton>
           <Theme />
           <Locales localesOptions={this.localesOptions} />
           <Timezone timezoneOptions={this.timezoneOptions} />
           <User userDropdownOptions={this.userDropdownOptions} />
-        </div>
-      </div>
+        </NSpace>
+      </NSpace>
     )
   }
 })

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

@@ -314,15 +314,7 @@ export function useDataList() {
                   icon: renderIcon(SafetyOutlined)
                 }
               ]
-      },
-      // add UI setting to the banner
-      {
-        label: () =>
-          h(NEllipsis, null, { default: () => t('menu.ui_setting') }),
-        key: 'ui-setting',
-        icon: renderIcon(SettingOutlined),
-        children: []
-      },
+      }
     ]
   }
 

dolphinscheduler-ui/src/locales/en_US/menu.ts

@@ -57,5 +57,5 @@ export default {
   data_quality: 'Data Quality',
   task_result: 'Task Result',
   rule: 'Rule management',
-  ui_setting: 'Setting',
+  ui_setting: 'UI Setting',
 }