Skip to content

Commit 8b9d547

Browse files
calvinjiangcalvinjiang
authored
Merge 2b49eb7 into 6562bc9 
2 parents 6562bc9 + 2b49eb7 commit 8b9d547

16 files changed

Lines changed: 981 additions & 38 deletions

File tree

‎dolphinscheduler-ui-next/package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,15 @@
2828
"@types/qs": "^6.9.7",
2929
"@typescript-eslint/eslint-plugin": "^5.6.0",
3030
"@typescript-eslint/parser": "^5.6.0",
31+
"@vicons/antd": "^0.11.0",
32+
"@vicons/carbon": "^0.11.0",
33+
"@vicons/fa": "^0.11.0",
34+
"@vicons/fluent": "^0.11.0",
35+
"@vicons/ionicons4": "^0.11.0",
36+
"@vicons/ionicons5": "^0.11.0",
37+
"@vicons/material": "^0.11.0",
38+
"@vicons/tabler": "^0.11.0",
39+
"@vicons/utils": "^0.1.4",
3140
"@vitejs/plugin-vue": "^1.10.2",
3241
"@vitejs/plugin-vue-jsx": "^1.3.1",
3342
"dart-sass": "^1.25.0",

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,18 @@
1717

1818
import { defineComponent, computed } from 'vue'
1919
import { NConfigProvider, darkTheme, GlobalThemeOverrides } from 'naive-ui'
20+
import { useAsyncRouteStore } from '@/store/route/route'
2021
import { useThemeStore } from '@/store/theme/theme'
2122
import themeList from '@/themes'
2223

2324
const App = defineComponent({
2425
name: 'App',
2526
setup() {
27+
const asyncRouteStore = useAsyncRouteStore()
2628
const themeStore = useThemeStore()
2729
const currentTheme = computed(() =>
2830
themeStore.darkTheme ? darkTheme : undefined
2931
)
30-
3132
return {
3233
currentTheme,
3334
}
@@ -42,7 +43,7 @@ const App = defineComponent({
4243
<NConfigProvider
4344
theme={this.currentTheme}
4445
themeOverrides={themeOverrides}
45-
style={{ width: '100%', height: '100vh' }}
46+
style={{ width: '100%', height: '100vh', overflow: 'hidden' }}
4647
>
4748
<router-view />
4849
</NConfigProvider>

‎dolphinscheduler-ui-next/src/assets/images/nav-logo.svg‎

Lines changed: 99 additions & 0 deletions
Loading

‎dolphinscheduler-ui-next/src/layouts/basic/components/header/index.module.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
.header-model {
19+
display: flex;
20+
justify-content: space-between;
21+
align-items: center;
22+
height: 60px;
23+
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px;
24+
position: relative;
25+
width: 100%;
26+
padding: 0px;
27+
margin: 0px;
28+
.nav {
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
width: inherit;
33+
.menu {
34+
margin-left: 0px;
35+
text-align: center;
36+
font-size: 15px;
37+
color: rgb(255, 255, 255);
38+
}
39+
.profile {
40+
width: 135px;
41+
display: flex;
42+
justify-content: space-between;
43+
margin-right: 20px;
44+
text-align: center;
45+
.icon {
46+
margin-right: 5px;
47+
display: inline-flex;
48+
align-items: center;
49+
}
50+
}
51+
}
52+
}

‎dolphinscheduler-ui-next/src/layouts/basic/components/header/index.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import { defineComponent, ref } from "vue";
19+
20+
import styles from "./index.module.scss";
21+
import { NDropdown, NIcon, NLayoutHeader, NMenu } from "naive-ui";
22+
import { Logo } from "@/layouts/basic/components/logo";
23+
import { IosArrowDown } from "@vicons/ionicons4";
24+
import { UserAlt } from "@vicons/fa";
25+
26+
const Header = defineComponent({
27+
name: "Header",
28+
props: {
29+
inverted: {
30+
type: Boolean,
31+
default: true,
32+
},
33+
menuOptions: {
34+
type: Array,
35+
default: [],
36+
},
37+
languageOptions: {
38+
type: Array,
39+
default: [],
40+
},
41+
profileOptions: {
42+
type: Array,
43+
default: [],
44+
},
45+
currentMenu: {
46+
type: Object,
47+
},
48+
defaultMenuKey: {
49+
type: String,
50+
},
51+
},
52+
setup(props, context) {
53+
const currentMenuRef = ref({});
54+
55+
const handleMenuClick = (key, data) => {
56+
currentMenuRef.value = data;
57+
context.emit("menuClick", data);
58+
};
59+
60+
return { handleMenuClick };
61+
},
62+
render() {
63+
return (
64+
<NLayoutHeader
65+
class={styles["header-model"]}
66+
inverted={this.inverted}
67+
bordered
68+
>
69+
<Logo />
70+
<div class={styles.nav}>
71+
<NMenu
72+
mode="horizontal"
73+
onUpdate:value={this.handleMenuClick}
74+
defaultValue={this.defaultMenuKey}
75+
class={styles.menu}
76+
inverted={this.inverted}
77+
options={this.menuOptions}
78+
/>
79+
<div class={styles.profile}>
80+
<NDropdown inverted={this.inverted} options={this.languageOptions}>
81+
<span>
82+
中文
83+
<NIcon class={styles.icon}>
84+
<IosArrowDown />
85+
</NIcon>
86+
</span>
87+
</NDropdown>
88+
<NDropdown inverted={this.inverted} options={this.profileOptions}>
89+
<span>
90+
<NIcon class={styles.icon}>
91+
<UserAlt />
92+
</NIcon>
93+
admin
94+
<NIcon class={styles.icon}>
95+
<IosArrowDown />
96+
</NIcon>
97+
</span>
98+
</NDropdown>
99+
</div>
100+
</div>
101+
</NLayoutHeader>
102+
);
103+
},
104+
});
105+
106+
export { Header };

‎dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.module.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
.logo {
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
height: 64px;
23+
line-height: 64px;
24+
overflow: hidden;
25+
white-space: nowrap;
26+
width: 280px;
27+
28+
img {
29+
width: auto;
30+
height: 46px;
31+
}
32+
33+
.title {
34+
margin-bottom: 0;
35+
}
36+
}

‎dolphinscheduler-ui-next/src/layouts/basic/components/logo/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one or more
3+
* contributor license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright ownership.
5+
* The ASF licenses this file to You under the Apache License, Version 2.0
6+
* (the "License"); you may not use this file except in compliance with
7+
* the License. You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import { defineComponent, ref } from "vue";
19+
20+
import styles from "./index.module.scss";
21+
22+
const Logo = defineComponent({
23+
name: "Logo",
24+
setup() {
25+
const invertedRef = ref(true);
26+
27+
return { invertedRef };
28+
},
29+
render() {
30+
return (
31+
<div class={styles.logo}>
32+
<img src="../../../src/assets/images/nav-logo.svg" alt="" />
33+
</div>
34+
);
35+
},
36+
});
37+
38+
export { Logo };

0 commit comments

Comments
 (0)