This is an automated email from the ASF dual-hosted git repository.
wangyizhi pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 9efe3c5 [Feature][UI Next] Add card component. (#7606)
9efe3c5 is described below
commit 9efe3c5a4fba6d207623333ba290b94c73ce75e5
Author: songjianet <[email protected]>
AuthorDate: Fri Dec 24 16:53:03 2021 +0800
[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 ---
.../assets/images/{nav-logo.svg => logo-dark.svg} | 0
.../src/assets/images/{logo.svg => logo-light.svg} | 0
.../src/{views/home => components/card}/index.tsx | 34 +++++++++++++---------
.../modules/dark.ts => components/card/types.ts} | 8 ++---
.../content/components/logo/index.module.scss | 11 +++++--
.../src/layouts/content/components/logo/index.tsx | 16 ++++++++--
.../src/themes/modules/dark.ts | 2 +-
dolphinscheduler-ui-next/src/views/home/index.tsx | 8 ++---
.../src/views/login/index.module.scss | 4 +--
10 files changed, 53 insertions(+), 34 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/App.tsx
b/dolphinscheduler-ui-next/src/App.tsx
index 3b31730..685cf63 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 (
<NConfigProvider
theme={this.currentTheme}
diff --git a/dolphinscheduler-ui-next/src/assets/images/nav-logo.svg
b/dolphinscheduler-ui-next/src/assets/images/logo-dark.svg
old mode 100755
new mode 100644
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/nav-logo.svg
rename to dolphinscheduler-ui-next/src/assets/images/logo-dark.svg
diff --git a/dolphinscheduler-ui-next/src/assets/images/logo.svg
b/dolphinscheduler-ui-next/src/assets/images/logo-light.svg
similarity index 100%
rename from dolphinscheduler-ui-next/src/assets/images/logo.svg
rename to dolphinscheduler-ui-next/src/assets/images/logo-light.svg
diff --git a/dolphinscheduler-ui-next/src/views/home/index.tsx
b/dolphinscheduler-ui-next/src/components/card/index.tsx
similarity index 63%
copy from dolphinscheduler-ui-next/src/views/home/index.tsx
copy to dolphinscheduler-ui-next/src/components/card/index.tsx
index aec7920..357f973 100644
--- a/dolphinscheduler-ui-next/src/views/home/index.tsx
+++ b/dolphinscheduler-ui-next/src/components/card/index.tsx
@@ -15,23 +15,29 @@
* limitations under the License.
*/
-import { defineComponent } from 'vue'
-import styles from './index.module.scss'
-import PieChart from '@/components/chart/modules/Pie'
-import GaugeChart from '@/components/chart/modules/Gauge'
-import BarChart from '@/components/chart/modules/Bar'
+import { defineComponent, defineProps } from 'vue'
+import { NCard } from 'naive-ui'
+import Props from '@/components/card/types'
-export default defineComponent({
- name: 'home',
- setup() {},
+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 (
- <div class={styles.container}>
- Home Test
- <PieChart />
- <GaugeChart />
- <BarChart />
- </div>
+ <NCard title={title} size='small' headerStyle={headerStyle}>
+ {$slots}
+ </NCard>
)
},
})
+
+export default Card
diff --git a/dolphinscheduler-ui-next/src/themes/modules/dark.ts
b/dolphinscheduler-ui-next/src/components/card/types.ts
similarity index 91%
copy from dolphinscheduler-ui-next/src/themes/modules/dark.ts
copy to dolphinscheduler-ui-next/src/components/card/types.ts
index 0505b5c..f6f526f 100644
--- a/dolphinscheduler-ui-next/src/themes/modules/dark.ts
+++ b/dolphinscheduler-ui-next/src/components/card/types.ts
@@ -15,10 +15,8 @@
* limitations under the License.
*/
-const dark = {
- common: {
- bodyColor: '#28292d',
- },
+interface Props {
+ title: string
}
-export default dark
+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 2254960..a0b832c 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 fd658df..3fe91e2 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 <div class={styles.logo}></div>
+ return (
+ <div
+ class={[
+ styles.logo,
+ styles[`logo-${this.themeStore.darkTheme ? 'dark' : 'light'}`],
+ ]}
+ />
+ )
},
})
diff --git a/dolphinscheduler-ui-next/src/themes/modules/dark.ts
b/dolphinscheduler-ui-next/src/themes/modules/dark.ts
index 0505b5c..90b7bc9 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 aec7920..35d63d1 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 (
<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>
)
},
diff --git a/dolphinscheduler-ui-next/src/views/login/index.module.scss
b/dolphinscheduler-ui-next/src/views/login/index.module.scss
index 6a7c8c0..e460558 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
+}
