You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by zh...@apache.org on 2021/12/15 09:38:41 UTC
[dolphinscheduler] branch dev updated: [Feature][UI Next] Improve some basic configuration. (#7430)
This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new f36ca02 [Feature][UI Next] Improve some basic configuration. (#7430)
f36ca02 is described below
commit f36ca0290770cd0f70a8fd29b17d0daf02d525db
Author: songjianet <17...@qq.com>
AuthorDate: Wed Dec 15 17:38:32 2021 +0800
[Feature][UI Next] Improve some basic configuration. (#7430)
---
dolphinscheduler-ui-next/package.json | 1 +
dolphinscheduler-ui-next/src/App.tsx | 13 ++++++-----
.../table/DSTable.tsx} | 17 ++++++---------
.../index.ts => layouts/content/Content.tsx} | 25 +++++++++++-----------
dolphinscheduler-ui-next/src/router/index.ts | 11 ++++++++--
.../src/store/{ => theme}/theme.ts | 13 +++++++----
.../login.module.scss => store/theme/types.ts} | 15 ++++---------
.../login/login.module.scss => themes/index.ts} | 17 ++++++---------
.../login.module.scss => themes/modules/dark.ts} | 17 ++++++---------
.../login.module.scss => themes/modules/light.ts} | 18 ++++++----------
dolphinscheduler-ui-next/src/views/login/Login.tsx | 15 ++++++++++---
.../src/views/login/login.module.scss | 7 +-----
12 files changed, 82 insertions(+), 87 deletions(-)
diff --git a/dolphinscheduler-ui-next/package.json b/dolphinscheduler-ui-next/package.json
index f2a8a10..352f4c2 100644
--- a/dolphinscheduler-ui-next/package.json
+++ b/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",
diff --git a/dolphinscheduler-ui-next/src/App.tsx b/dolphinscheduler-ui-next/src/App.tsx
index b102512..a23f144 100644
--- a/dolphinscheduler-ui-next/src/App.tsx
+++ b/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 />
diff --git a/dolphinscheduler-ui-next/src/views/login/login.module.scss b/dolphinscheduler-ui-next/src/components/table/DSTable.tsx
similarity index 81%
copy from dolphinscheduler-ui-next/src/views/login/login.module.scss
copy to dolphinscheduler-ui-next/src/components/table/DSTable.tsx
index 00a7786..39932b3 100644
--- a/dolphinscheduler-ui-next/src/views/login/login.module.scss
+++ b/dolphinscheduler-ui-next/src/components/table/DSTable.tsx
@@ -15,15 +15,10 @@
* limitations under the License.
*/
-.login-container {
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
+import { defineComponent } from 'vue'
- > .form-box {
- width: 400px;
- min-height: 260px;
- }
-}
+const DSTable = defineComponent({
+ name: 'DSTable',
+})
+
+export default DSTable
diff --git a/dolphinscheduler-ui-next/src/router/index.ts b/dolphinscheduler-ui-next/src/layouts/content/Content.tsx
similarity index 72%
copy from dolphinscheduler-ui-next/src/router/index.ts
copy to dolphinscheduler-ui-next/src/layouts/content/Content.tsx
index 4dc4643..8211f18 100644
--- a/dolphinscheduler-ui-next/src/router/index.ts
+++ b/dolphinscheduler-ui-next/src/layouts/content/Content.tsx
@@ -15,19 +15,20 @@
* limitations under the License.
*/
-import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import { defineComponent } from 'vue'
+import { NLayout, NLayoutContent } from 'naive-ui'
-const routes: RouteRecordRaw[] = [
- {
- path: '/login',
- name: 'Login',
- component: () => import('@/views/login/Login'),
+const Content = defineComponent({
+ name: 'Content',
+ render() {
+ return (
+ <NLayout>
+ <NLayoutContent>
+ <router-view />
+ </NLayoutContent>
+ </NLayout>
+ )
},
-]
-
-const index = createRouter({
- history: createWebHistory(),
- routes,
})
-export default index
+export default Content
diff --git a/dolphinscheduler-ui-next/src/router/index.ts b/dolphinscheduler-ui-next/src/router/index.ts
index 4dc4643..801f411 100644
--- a/dolphinscheduler-ui-next/src/router/index.ts
+++ b/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'),
+ },
+ ],
},
]
diff --git a/dolphinscheduler-ui-next/src/store/theme.ts b/dolphinscheduler-ui-next/src/store/theme/theme.ts
similarity index 82%
rename from dolphinscheduler-ui-next/src/store/theme.ts
rename to dolphinscheduler-ui-next/src/store/theme/theme.ts
index 113bc1e..a9f8be6 100644
--- a/dolphinscheduler-ui-next/src/store/theme.ts
+++ b/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: {},
})
diff --git a/dolphinscheduler-ui-next/src/views/login/login.module.scss b/dolphinscheduler-ui-next/src/store/theme/types.ts
similarity index 81%
copy from dolphinscheduler-ui-next/src/views/login/login.module.scss
copy to dolphinscheduler-ui-next/src/store/theme/types.ts
index 00a7786..c2ca699 100644
--- a/dolphinscheduler-ui-next/src/views/login/login.module.scss
+++ b/dolphinscheduler-ui-next/src/store/theme/types.ts
@@ -15,15 +15,8 @@
* limitations under the License.
*/
-.login-container {
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
-
- > .form-box {
- width: 400px;
- min-height: 260px;
- }
+interface ThemeState {
+ darkTheme: boolean
}
+
+export default ThemeState
diff --git a/dolphinscheduler-ui-next/src/views/login/login.module.scss b/dolphinscheduler-ui-next/src/themes/index.ts
similarity index 81%
copy from dolphinscheduler-ui-next/src/views/login/login.module.scss
copy to dolphinscheduler-ui-next/src/themes/index.ts
index 00a7786..f42e0b8 100644
--- a/dolphinscheduler-ui-next/src/views/login/login.module.scss
+++ b/dolphinscheduler-ui-next/src/themes/index.ts
@@ -15,15 +15,12 @@
* limitations under the License.
*/
-.login-container {
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
+import light from './modules/light'
+import dark from './modules/dark'
- > .form-box {
- width: 400px;
- min-height: 260px;
- }
+const themeList = {
+ light,
+ dark,
}
+
+export default themeList
diff --git a/dolphinscheduler-ui-next/src/views/login/login.module.scss b/dolphinscheduler-ui-next/src/themes/modules/dark.ts
similarity index 81%
copy from dolphinscheduler-ui-next/src/views/login/login.module.scss
copy to dolphinscheduler-ui-next/src/themes/modules/dark.ts
index 00a7786..0505b5c 100644
--- a/dolphinscheduler-ui-next/src/views/login/login.module.scss
+++ b/dolphinscheduler-ui-next/src/themes/modules/dark.ts
@@ -15,15 +15,10 @@
* limitations under the License.
*/
-.login-container {
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
-
- > .form-box {
- width: 400px;
- min-height: 260px;
- }
+const dark = {
+ common: {
+ bodyColor: '#28292d',
+ },
}
+
+export default dark
diff --git a/dolphinscheduler-ui-next/src/views/login/login.module.scss b/dolphinscheduler-ui-next/src/themes/modules/light.ts
similarity index 81%
copy from dolphinscheduler-ui-next/src/views/login/login.module.scss
copy to dolphinscheduler-ui-next/src/themes/modules/light.ts
index 00a7786..2f14815 100644
--- a/dolphinscheduler-ui-next/src/views/login/login.module.scss
+++ b/dolphinscheduler-ui-next/src/themes/modules/light.ts
@@ -14,16 +14,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
-.login-container {
- width: 100%;
- height: 100vh;
- display: flex;
- justify-content: center;
- align-items: center;
-
- > .form-box {
- width: 400px;
- min-height: 260px;
- }
+const light = {
+ common: {
+ bodyColor: '#f8f8fc',
+ },
}
+
+export default light
diff --git a/dolphinscheduler-ui-next/src/views/login/Login.tsx b/dolphinscheduler-ui-next/src/views/login/Login.tsx
index adbc8c3..488127e 100644
--- a/dolphinscheduler-ui-next/src/views/login/Login.tsx
+++ b/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>
diff --git a/dolphinscheduler-ui-next/src/views/login/login.module.scss b/dolphinscheduler-ui-next/src/views/login/login.module.scss
index 00a7786..b71f6b6 100644
--- a/dolphinscheduler-ui-next/src/views/login/login.module.scss
+++ b/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;
- }
}