[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

@@ -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 (
       <NConfigProvider
         theme={this.currentTheme}

dolphinscheduler-ui-next/src/components/card/index.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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, defineProps } from 'vue'
+import { NCard } from 'naive-ui'
+import Props from '@/components/card/types'
+
+const headerStyle = {
+  borderBottom: '1px solid var(--border-color)',
+}
+
+const Card = defineComponent({
+  name: 'Card',
+  setup() {
+    const props = defineProps<Props>()
+
+    return { ...props }
+  },
+  render() {
+    const { title, $slots } = this
+    return (
+      <NCard title={title} size='small' headerStyle={headerStyle}>
+        {$slots}
+      </NCard>
+    )
+  },
+})
+
+export default Card

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

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;
 }

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 <div class={styles.logo}></div>
+    return (
+      <div
+        class={[
+          styles.logo,
+          styles[`logo-${this.themeStore.darkTheme ? 'dark' : 'light'}`],
+        ]}
+      />
+    )
   },
 })
 

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

@@ -17,7 +17,7 @@
 
 const dark = {
   common: {
-    bodyColor: '#28292d',
+    // bodyColor: '#28292d',
   },
 }
 

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 (
       <div class={styles.container}>
-        Home Test
-        <PieChart />
-        <GaugeChart />
-        <BarChart />
+        <Card title='test'>{{ default: () => <PieChart /> }}</Card>
+        <Card title='test'>{{ default: () => <GaugeChart /> }}</Card>
+        <Card title='test'>{{ default: () => <BarChart /> }}</Card>
       </div>
     )
   },

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;
     }
   }
-}
+}