diff --git a/dolphinscheduler-ui-next/package.json b/dolphinscheduler-ui-next/package.json index f2a8a10166..352f4c26bd 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 b1025121fc..a23f14454f 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 ( diff --git a/dolphinscheduler-ui-next/src/components/table/DSTable.tsx b/dolphinscheduler-ui-next/src/components/table/DSTable.tsx new file mode 100644 index 0000000000..39932b30df --- /dev/null +++ b/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 diff --git a/dolphinscheduler-ui-next/src/layouts/content/Content.tsx b/dolphinscheduler-ui-next/src/layouts/content/Content.tsx new file mode 100644 index 0000000000..8211f18719 --- /dev/null +++ b/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 ( + + + + + + ) + }, +}) + +export default Content diff --git a/dolphinscheduler-ui-next/src/router/index.ts b/dolphinscheduler-ui-next/src/router/index.ts index 4dc4643dc6..801f411e04 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 113bc1e510..a9f8be6461 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/store/theme/types.ts b/dolphinscheduler-ui-next/src/store/theme/types.ts new file mode 100644 index 0000000000..c2ca699b43 --- /dev/null +++ b/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 diff --git a/dolphinscheduler-ui-next/src/themes/index.ts b/dolphinscheduler-ui-next/src/themes/index.ts new file mode 100644 index 0000000000..f42e0b8f30 --- /dev/null +++ b/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 diff --git a/dolphinscheduler-ui-next/src/themes/modules/dark.ts b/dolphinscheduler-ui-next/src/themes/modules/dark.ts new file mode 100644 index 0000000000..0505b5cd3e --- /dev/null +++ b/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 diff --git a/dolphinscheduler-ui-next/src/themes/modules/light.ts b/dolphinscheduler-ui-next/src/themes/modules/light.ts new file mode 100644 index 0000000000..2f14815984 --- /dev/null +++ b/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 diff --git a/dolphinscheduler-ui-next/src/views/login/Login.tsx b/dolphinscheduler-ui-next/src/views/login/Login.tsx index adbc8c3e30..488127e7d2 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 ( -
- {this.t('login.test')} +
+ + {this.t('login.test')} + 切换主题 +