[Feature][UI Next] Improve some basic configuration. (#7430)

dolphinscheduler-ui-next/package.json

@@ -22,6 +22,7 @@
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
+    "@types/node": "^16.11.13",
     "@types/nprogress": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",

dolphinscheduler-ui-next/src/App.tsx

@@ -16,27 +16,30 @@
  */
 
 import { defineComponent, computed } from 'vue'
-import { NConfigProvider, darkTheme } from 'naive-ui'
-import { useThemeStore } from '@/store/theme'
+import { NConfigProvider, darkTheme, GlobalThemeOverrides } from 'naive-ui'
+import { useThemeStore } from '@/store/theme/theme'
+import themeList from '@/themes'
 
 const App = defineComponent({
   name: 'App',
   setup() {
     const themeStore = useThemeStore()
-    console.log(themeStore.dartTheme)
     const currentTheme = computed(() =>
-      themeStore.dartTheme ? darkTheme : undefined
+      themeStore.darkTheme ? darkTheme : undefined
     )
-    console.log(currentTheme.value)
 
     return {
       currentTheme,
     }
   },
   render() {
+    const themeOverrides: GlobalThemeOverrides =
+      themeList[this.currentTheme ? 'dark' : 'light']
+
     return (
       <NConfigProvider
         theme={this.currentTheme}
+        themeOverrides={themeOverrides}
         style={{ width: '100%', height: '100vh' }}
       >
         <router-view />

dolphinscheduler-ui-next/src/components/table/DSTable.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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'
+
+const DSTable = defineComponent({
+  name: 'DSTable',
+})
+
+export default DSTable

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

@@ -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.
+ */
+
+import { defineComponent } from 'vue'
+import { NLayout, NLayoutContent } from 'naive-ui'
+
+const Content = defineComponent({
+  name: 'Content',
+  render() {
+    return (
+      <NLayout>
+        <NLayoutContent>
+          <router-view />
+        </NLayoutContent>
+      </NLayout>
+    )
+  },
+})
+
+export default Content

dolphinscheduler-ui-next/src/router/index.ts

@@ -20,8 +20,15 @@ import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 const routes: RouteRecordRaw[] = [
   {
     path: '/login',
-    name: 'Login',
-    component: () => import('@/views/login/Login'),
+    redirect: { name: 'Login' },
+    component: () => import('@/layouts/content/Content'),
+    children: [
+      {
+        path: '/login',
+        name: 'Login',
+        component: () => import('@/views/login/Login'),
+      },
+    ],
   },
 ]
 

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

@@ -16,16 +16,21 @@
  */
 
 import { defineStore } from 'pinia'
+import ThemeState from './types'
 
 export const useThemeStore = defineStore({
   id: 'theme',
-  state: () => ({
-    dartTheme: true,
+  state: (): ThemeState => ({
+    darkTheme: true,
   }),
   getters: {
     getTheme(): boolean {
-      return this.dartTheme
+      return this.darkTheme
+    },
+  },
+  actions: {
+    setDarkTheme(): void {
+      this.darkTheme = !this.darkTheme
     },
   },
-  actions: {},
 })

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

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+interface ThemeState {
+  darkTheme: boolean
+}
+
+export default ThemeState

dolphinscheduler-ui-next/src/themes/index.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 light from './modules/light'
+import dark from './modules/dark'
+
+const themeList = {
+  light,
+  dark,
+}
+
+export default themeList

dolphinscheduler-ui-next/src/themes/modules/dark.ts

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+const dark = {
+  common: {
+    bodyColor: '#28292d',
+  },
+}
+
+export default dark

dolphinscheduler-ui-next/src/themes/modules/light.ts

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+const light = {
+  common: {
+    bodyColor: '#f8f8fc',
+  },
+}
+
+export default light

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

@@ -19,17 +19,26 @@ import { defineComponent } from 'vue'
 import styles from './login.module.scss'
 import { useI18n } from 'vue-i18n'
 import { NButton } from 'naive-ui'
+import { useThemeStore } from '@/store/theme/theme'
 
 const Login = defineComponent({
   name: 'Login',
   setup() {
     const { t, locale } = useI18n()
-    return { t, locale }
+    const themeStore = useThemeStore()
+
+    const setTheme = (): void => {
+      themeStore.setDarkTheme()
+    }
+
+    return { t, locale, setTheme }
   },
   render() {
     return (
-      <div class={styles['login-container']}>
-        <NButton type='error'>{this.t('login.test')}</NButton>
+      <div class={styles.container}>
+        <NButton type='error' onClick={this.setTheme}>
+          {this.t('login.test')} + 切换主题
+        </NButton>
         <select v-model={this.locale}>
           <option value='en_US'>en_US</option>
           <option value='zh_CN'>zh_CN</option>

dolphinscheduler-ui-next/src/views/login/login.module.scss

@@ -15,15 +15,10 @@
  * limitations under the License.
  */
 
-.login-container {
+.container {
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
-
-  > .form-box {
-    width: 400px;
-    min-height: 260px;
-  }
 }