[Fix][UI] Fix the line break problem in navbar. (#12647)

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

@@ -0,0 +1,34 @@
+/*
+ * 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

@@ -19,7 +19,8 @@ import { defineComponent, PropType, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { SettingOutlined } from '@vicons/antd'
 import { useI18n } from 'vue-i18n'
-import { NMenu, NSpace, NButton, NIcon } from 'naive-ui'
+import { NMenu, NButton, NIcon } from 'naive-ui'
+import styles from './index.module.scss'
 import Logo from '../logo'
 import Locales from '../locales'
 import Timezone from '../timezone'
@@ -71,19 +72,17 @@ const Navbar = defineComponent({
   },
   render() {
     return (
-      <NSpace style='height: 65px' justify='space-between' align='center'>
+      <div class={styles.container}>
-        <NSpace align='center'>
+        <Logo />
-          <NSpace>
+        <div class={styles.nav}>
-            <Logo />
+          <NMenu
-            <NMenu
+            value={this.menuKey}
-              value={this.menuKey}
+            mode='horizontal'
-              mode='horizontal'
+            options={this.headerMenuOptions}
-              options={this.headerMenuOptions}
+            onUpdateValue={this.handleMenuClick}
-              onUpdateValue={this.handleMenuClick}
+          />
-            />
+        </div>
-          </NSpace>
+        <div class={styles.settings}>
-        </NSpace>
-        <NSpace align='center'>
           <NButton quaternary onClick={this.handleUISettingClick}>
             {{
               icon: () => <NIcon size='16'>
@@ -96,8 +95,8 @@ const Navbar = defineComponent({
           <Locales localesOptions={this.localesOptions} />
           <Timezone timezoneOptions={this.timezoneOptions} />
           <User userDropdownOptions={this.userDropdownOptions} />
-        </NSpace>
+        </div>
-      </NSpace>
+      </div>
     )
   }
 })