[Feature][UI Next] Add navbar theme function. (#7670)

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

@@ -21,6 +21,7 @@ import { NMenu } from 'naive-ui'
 import Logo from '../logo'
 import Language from '../language'
 import User from '../user'
+import Theme from '../theme'
 import { useMenuClick } from './use-menuClick'
 
 const navbar = defineComponent({
@@ -56,6 +57,7 @@ const navbar = defineComponent({
           />
         </div>
         <div class={styles.settings}>
+          <Theme />
           <Language languageOptions={this.languageOptions} />
           <User profileOptions={this.profileOptions} />
         </div>

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

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+.theme {
+  margin: 0 12px;
+}

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

@@ -0,0 +1,45 @@
+/*
+ * 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 { NButton } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useThemeStore } from '@/store/theme/theme'
+import styles from './index.module.scss'
+
+const Theme = defineComponent({
+  name: 'Theme',
+  setup() {
+    const { t } = useI18n()
+    const themeStore = useThemeStore()
+
+    return { t, themeStore }
+  },
+  render() {
+    return (
+      <NButton
+        class={styles.theme}
+        quaternary
+        onClick={() => (this.themeStore.darkTheme = !this.themeStore.darkTheme)}
+      >
+        {this.t(this.themeStore.darkTheme ? 'theme.light' : 'theme.dark')}
+      </NButton>
+    )
+  },
+})
+
+export default Theme

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

@@ -19,6 +19,7 @@ import { defineComponent, 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'
 
 const Content = defineComponent({

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

@@ -25,7 +25,7 @@ import {
   DesktopOutlined,
   SafetyCertificateOutlined,
   UserOutlined,
-  LogoutOutlined
+  LogoutOutlined,
 } from '@vicons/antd'
 
 export function useDataList() {
@@ -74,9 +74,9 @@ export function useDataList() {
               key: 'task-instance',
               icon: renderIcon(ProfileOutlined),
             },
-          ]
+          ],
         },
-      ]
+      ],
     },
     {
       label: '资源中心',
@@ -102,10 +102,10 @@ export function useDataList() {
               label: '函数管理',
               key: 'function-management',
               icon: renderIcon(ProfileOutlined),
-            }
-          ]
+            },
+          ],
         },
-      ]
+      ],
     },
     {
       label: '数据源中心',
@@ -136,8 +136,8 @@ export function useDataList() {
               label: 'DB',
               key: 'DB',
               icon: renderIcon(ProfileOutlined),
-            }
-          ]
+            },
+          ],
         },
         {
           label: '统计管理',
@@ -149,9 +149,9 @@ export function useDataList() {
               key: 'statistics',
               icon: renderIcon(ProfileOutlined),
             },
-          ]
+          ],
         },
-      ]
+      ],
     },
     {
       label: '安全中心',
@@ -198,7 +198,7 @@ export function useDataList() {
           key: 'token-management',
           icon: renderIcon(ProfileOutlined),
         },
-      ]
+      ],
     },
   ]
 
@@ -228,13 +228,15 @@ export function useDataList() {
 
   const getHeaderMenuOptions = (MenuOptions: any) => {
     let headerMenuOptions = []
-    headerMenuOptions = MenuOptions.map((item: { label: string; key: string; icon: any }) => {
-      return {
-        label: item.label,
-        key: item.key,
-        icon: item.icon,
+    headerMenuOptions = MenuOptions.map(
+      (item: { label: string; key: string; icon: any }) => {
+        return {
+          label: item.label,
+          key: item.key,
+          icon: item.icon,
+        }
       }
-    })
+    )
     return headerMenuOptions
   }
 
@@ -246,6 +248,6 @@ export function useDataList() {
 
   return {
     state,
-    getHeaderMenuOptions
+    getHeaderMenuOptions,
   }
 }

dolphinscheduler-ui-next/src/locales/modules/en_US.ts

@@ -21,9 +21,15 @@ const login = {
   userName_tips: 'Please enter your username',
   userPassword: 'Password',
   userPassword_tips: 'Please enter your password',
-  signin: 'Sign In',
+  login: 'Login',
+}
+
+const theme = {
+  light: 'Light',
+  dark: 'Dark',
 }
 
 export default {
   login,
+  theme,
 }

dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts

@@ -21,9 +21,15 @@ const login = {
   userName_tips: '请输入用户名',
   userPassword: '密码',
   userPassword_tips: '请输入密码',
-  signin: '登录',
+  login: '登录',
+}
+
+const theme = {
+  light: '浅色',
+  dark: '深色',
 }
 
 export default {
   login,
+  theme,
 }

dolphinscheduler-ui-next/src/views/login/index.tsx

@@ -50,7 +50,7 @@ const login = defineComponent({
         </div>
         <div class={styles['login-model']}>
           <div class={styles.logo}>
-            <div class={styles['logo-img']}></div>
+            <div class={styles['logo-img']} />
           </div>
           <div class={styles['form-model']}>
             <NForm rules={this.rules} ref='loginFormRef'>
@@ -88,7 +88,7 @@ const login = defineComponent({
               style={{ width: '100%' }}
               onClick={this.handleLogin}
             >
-              {this.t('login.signin')}
+              {this.t('login.login')}
             </NButton>
           </div>
         </div>

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

@@ -21,6 +21,7 @@ import { useI18n } from 'vue-i18n'
 
 export function useValidate() {
   const { t, locale } = useI18n()
+
   const state = reactive({
     loginFormRef: ref(),
     loginForm: {