Browse Source

[Feature][UI Next] Add card component. (#7606)

* [Feature][UI Next] Add card component.
* [Feature][UI Next] Update card component props.
3.0.0/version-upgrade
songjianet 3 years ago committed by GitHub
parent
commit
9efe3c5a4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 4
      dolphinscheduler-ui-next/src/App.tsx
  2. 0
      dolphinscheduler-ui-next/src/assets/images/logo-dark.svg
  3. 0
      dolphinscheduler-ui-next/src/assets/images/logo-light.svg
  4. 43
      dolphinscheduler-ui-next/src/components/card/index.tsx
  5. 22
      dolphinscheduler-ui-next/src/components/card/types.ts
  6. 11
      dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss
  7. 16
      dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx
  8. 2
      dolphinscheduler-ui-next/src/themes/modules/dark.ts
  9. 8
      dolphinscheduler-ui-next/src/views/home/index.tsx
  10. 4
      dolphinscheduler-ui-next/src/views/login/index.module.scss

4
dolphinscheduler-ui-next/src/App.tsx

@ -17,14 +17,12 @@
import { defineComponent, computed } from 'vue' import { defineComponent, computed } from 'vue'
import { NConfigProvider, darkTheme, GlobalThemeOverrides } from 'naive-ui' import { NConfigProvider, darkTheme, GlobalThemeOverrides } from 'naive-ui'
import { useAsyncRouteStore } from '@/store/route/route'
import { useThemeStore } from '@/store/theme/theme' import { useThemeStore } from '@/store/theme/theme'
import themeList from '@/themes' import themeList from '@/themes'
const App = defineComponent({ const App = defineComponent({
name: 'App', name: 'App',
setup() { setup() {
const asyncRouteStore = useAsyncRouteStore()
const themeStore = useThemeStore() const themeStore = useThemeStore()
const currentTheme = computed(() => const currentTheme = computed(() =>
themeStore.darkTheme ? darkTheme : undefined themeStore.darkTheme ? darkTheme : undefined
@ -37,8 +35,6 @@ const App = defineComponent({
const themeOverrides: GlobalThemeOverrides = const themeOverrides: GlobalThemeOverrides =
themeList[this.currentTheme ? 'dark' : 'light'] themeList[this.currentTheme ? 'dark' : 'light']
console.log(themeOverrides)
return ( return (
<NConfigProvider <NConfigProvider
theme={this.currentTheme} theme={this.currentTheme}

0
dolphinscheduler-ui-next/src/assets/images/nav-logo.svg → dolphinscheduler-ui-next/src/assets/images/logo-dark.svg

Before

Width:  |  Height:  |  Size: 8.3 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

0
dolphinscheduler-ui-next/src/assets/images/logo.svg → dolphinscheduler-ui-next/src/assets/images/logo-light.svg

Before

Width:  |  Height:  |  Size: 8.4 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

43
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

22
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

11
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 * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
.logo { .logo {
width: 180px; width: 180px;
height: 100%; height: 100%;
margin-left: 12px; 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;
} }

16
dolphinscheduler-ui-next/src/layouts/content/components/logo/index.tsx

@ -16,13 +16,25 @@
*/ */
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import { useThemeStore } from '@/store/theme/theme'
import styles from './index.module.scss' import styles from './index.module.scss'
const logo = defineComponent({ const logo = defineComponent({
name: 'logo', name: 'logo',
setup() {}, setup() {
const themeStore = useThemeStore()
return { themeStore }
},
render() { render() {
return <div class={styles.logo}></div> return (
<div
class={[
styles.logo,
styles[`logo-${this.themeStore.darkTheme ? 'dark' : 'light'}`],
]}
/>
)
}, },
}) })

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

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

8
dolphinscheduler-ui-next/src/views/home/index.tsx

@ -17,6 +17,7 @@
import { defineComponent } from 'vue' import { defineComponent } from 'vue'
import styles from './index.module.scss' import styles from './index.module.scss'
import Card from '@/components/card'
import PieChart from '@/components/chart/modules/Pie' import PieChart from '@/components/chart/modules/Pie'
import GaugeChart from '@/components/chart/modules/Gauge' import GaugeChart from '@/components/chart/modules/Gauge'
import BarChart from '@/components/chart/modules/Bar' import BarChart from '@/components/chart/modules/Bar'
@ -27,10 +28,9 @@ export default defineComponent({
render() { render() {
return ( return (
<div class={styles.container}> <div class={styles.container}>
Home Test <Card title='test'>{{ default: () => <PieChart /> }}</Card>
<PieChart /> <Card title='test'>{{ default: () => <GaugeChart /> }}</Card>
<GaugeChart /> <Card title='test'>{{ default: () => <BarChart /> }}</Card>
<BarChart />
</div> </div>
) )
}, },

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

@ -45,7 +45,7 @@
.logo-img { .logo-img {
width: 280px; width: 280px;
height: 60px; height: 60px;
background: url('../../assets/images/logo.svg') 50% no-repeat; background: url('../../assets/images/logo-light.svg') 50% no-repeat;
margin: 0 auto; margin: 0 auto;
} }
} }
@ -54,4 +54,4 @@
padding: 30px 20px; padding: 30px 20px;
} }
} }
} }

Loading…
Cancel
Save