From 9efe3c5a4fba6d207623333ba290b94c73ce75e5 Mon Sep 17 00:00:00 2001 From: songjianet <1778651752@qq.com> Date: Fri, 24 Dec 2021 16:53:03 +0800 Subject: [PATCH] [Feature][UI Next] Add card component. (#7606) * [Feature][UI Next] Add card component. * [Feature][UI Next] Update card component props. --- dolphinscheduler-ui-next/src/App.tsx | 4 -- .../images/{nav-logo.svg => logo-dark.svg} | 0 .../images/{logo.svg => logo-light.svg} | 0 .../src/components/card/index.tsx | 43 +++++++++++++++++++ .../src/components/card/types.ts | 22 ++++++++++ .../content/components/logo/index.module.scss | 11 ++++- .../layouts/content/components/logo/index.tsx | 16 ++++++- .../src/themes/modules/dark.ts | 2 +- .../src/views/home/index.tsx | 8 ++-- .../src/views/login/index.module.scss | 4 +- 10 files changed, 95 insertions(+), 15 deletions(-) rename dolphinscheduler-ui-next/src/assets/images/{nav-logo.svg => logo-dark.svg} (100%) mode change 100755 => 100644 rename dolphinscheduler-ui-next/src/assets/images/{logo.svg => logo-light.svg} (100%) create mode 100644 dolphinscheduler-ui-next/src/components/card/index.tsx create mode 100644 dolphinscheduler-ui-next/src/components/card/types.ts diff --git a/dolphinscheduler-ui-next/src/App.tsx b/dolphinscheduler-ui-next/src/App.tsx index 3b31730a77..685cf635a4 100644 --- a/dolphinscheduler-ui-next/src/App.tsx +++ b/dolphinscheduler-ui-next/src/App.tsx @@ -17,14 +17,12 @@ import { defineComponent, computed } from 'vue' import { NConfigProvider, darkTheme, GlobalThemeOverrides } from 'naive-ui' -import { useAsyncRouteStore } from '@/store/route/route' import { useThemeStore } from '@/store/theme/theme' import themeList from '@/themes' const App = defineComponent({ name: 'App', setup() { - const asyncRouteStore = useAsyncRouteStore() const themeStore = useThemeStore() const currentTheme = computed(() => themeStore.darkTheme ? darkTheme : undefined @@ -37,8 +35,6 @@ const App = defineComponent({ const themeOverrides: GlobalThemeOverrides = themeList[this.currentTheme ? 'dark' : 'light'] - console.log(themeOverrides) - return ( () + + return { ...props } + }, + render() { + const { title, $slots } = this + return ( + + {$slots} + + ) + }, +}) + +export default Card diff --git a/dolphinscheduler-ui-next/src/components/card/types.ts b/dolphinscheduler-ui-next/src/components/card/types.ts new file mode 100644 index 0000000000..f6f526f909 --- /dev/null +++ b/dolphinscheduler-ui-next/src/components/card/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 Props { + title: string +} + +export default Props diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss index 2254960345..a0b832c6d5 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss +++ b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss @@ -14,10 +14,17 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - + .logo { width: 180px; height: 100%; margin-left: 12px; - background: url('../../../../assets/images/logo.svg') 100% no-repeat; +} + +.logo-dark { + background: url('../../../../assets/images/logo-dark.svg') 100% no-repeat; +} + +.logo-light { + background: url('../../../../assets/images/logo-light.svg') 100% no-repeat; } diff --git a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx index fd658dfaf9..3fe91e2dcc 100644 --- a/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx +++ b/dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx @@ -16,13 +16,25 @@ */ import { defineComponent } from 'vue' +import { useThemeStore } from '@/store/theme/theme' import styles from './index.module.scss' const logo = defineComponent({ name: 'logo', - setup() {}, + setup() { + const themeStore = useThemeStore() + + return { themeStore } + }, render() { - return
+ return ( +
+ ) }, }) diff --git a/dolphinscheduler-ui-next/src/themes/modules/dark.ts b/dolphinscheduler-ui-next/src/themes/modules/dark.ts index 0505b5cd3e..90b7bc9d5a 100644 --- a/dolphinscheduler-ui-next/src/themes/modules/dark.ts +++ b/dolphinscheduler-ui-next/src/themes/modules/dark.ts @@ -17,7 +17,7 @@ const dark = { common: { - bodyColor: '#28292d', + // bodyColor: '#28292d', }, } diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx b/dolphinscheduler-ui-next/src/views/home/index.tsx index aec7920f0c..35d63d1bd6 100644 --- a/dolphinscheduler-ui-next/src/views/home/index.tsx +++ b/dolphinscheduler-ui-next/src/views/home/index.tsx @@ -17,6 +17,7 @@ import { defineComponent } from 'vue' import styles from './index.module.scss' +import Card from '@/components/card' import PieChart from '@/components/chart/modules/Pie' import GaugeChart from '@/components/chart/modules/Gauge' import BarChart from '@/components/chart/modules/Bar' @@ -27,10 +28,9 @@ export default defineComponent({ render() { return (
- Home Test - - - + {{ default: () => }} + {{ default: () => }} + {{ default: () => }}
) }, diff --git a/dolphinscheduler-ui-next/src/views/login/index.module.scss b/dolphinscheduler-ui-next/src/views/login/index.module.scss index 6a7c8c0b88..e4605586ad 100644 --- a/dolphinscheduler-ui-next/src/views/login/index.module.scss +++ b/dolphinscheduler-ui-next/src/views/login/index.module.scss @@ -45,7 +45,7 @@ .logo-img { width: 280px; height: 60px; - background: url('../../assets/images/logo.svg') 50% no-repeat; + background: url('../../assets/images/logo-light.svg') 50% no-repeat; margin: 0 auto; } } @@ -54,4 +54,4 @@ padding: 30px 20px; } } -} \ No newline at end of file +}