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

2021-12-28 15:09:49 +08:00 · 2021-12-28 15:09:49 +08:00 · 080cff2bd6
parent 269a62418f
commit 080cff2bd6
9 changed files with 105 additions and 22 deletions
--- a/dolphinscheduler-ui-next/src/layouts/content/components/navbar/index.tsx
+++ b/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>
--- a/dolphinscheduler-ui-next/src/layouts/content/components/theme/index.module.scss
+++ b/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;
+}
--- a/dolphinscheduler-ui-next/src/layouts/content/components/theme/index.tsx
+++ b/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
--- a/dolphinscheduler-ui-next/src/layouts/content/index.tsx
+++ b/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({
--- a/dolphinscheduler-ui-next/src/layouts/content/use-dataList.ts
+++ b/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,
  }
 }
--- a/dolphinscheduler-ui-next/src/locales/modules/en_US.ts
+++ b/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,
 }
--- a/dolphinscheduler-ui-next/src/locales/modules/zh_CN.ts
+++ b/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,
 }
--- a/dolphinscheduler-ui-next/src/views/login/index.tsx
+++ b/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>
--- a/dolphinscheduler-ui-next/src/views/login/use-validate.ts
+++ b/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: {