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. 9
      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. 2
      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 { 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}

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

9
dolphinscheduler-ui-next/src/layouts/content/components/logo/index.module.scss

@ -19,5 +19,12 @@
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;
}

16
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'}`],
]}
/>
)
},
})

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

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

8
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>
)
},

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

Loading…
Cancel
Save