songjianet
3 years ago
committed by
GitHub
15 changed files with 46 additions and 637 deletions
@ -1,52 +0,0 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
.header-model { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
height: 60px; |
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px; |
||||
position: relative; |
||||
width: 100%; |
||||
padding: 0px; |
||||
margin: 0px; |
||||
.nav { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: inherit; |
||||
.menu { |
||||
margin-left: 0px; |
||||
text-align: center; |
||||
font-size: 15px; |
||||
color: rgb(255, 255, 255); |
||||
} |
||||
.profile { |
||||
width: 135px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
.icon { |
||||
margin-right: 5px; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,106 +0,0 @@
|
||||
/* |
||||
* 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, ref } from 'vue' |
||||
|
||||
import styles from './index.module.scss' |
||||
import { NDropdown, NIcon, NLayoutHeader, NMenu } from 'naive-ui' |
||||
import Logo from '@/layouts/basic/components/logo' |
||||
import { IosArrowDown } from '@vicons/ionicons4' |
||||
import { UserAlt } from '@vicons/fa' |
||||
|
||||
const Header = defineComponent({ |
||||
name: 'Header', |
||||
props: { |
||||
inverted: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
menuOptions: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
languageOptions: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
profileOptions: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
currentMenu: { |
||||
type: Object, |
||||
}, |
||||
defaultMenuKey: { |
||||
type: String, |
||||
}, |
||||
}, |
||||
setup(props, context) { |
||||
const currentMenuRef = ref({}) |
||||
|
||||
const handleMenuClick = (key, data) => { |
||||
currentMenuRef.value = data |
||||
context.emit('menuClick', data) |
||||
} |
||||
|
||||
return { handleMenuClick } |
||||
}, |
||||
render() { |
||||
return ( |
||||
<NLayoutHeader |
||||
class={styles['header-model']} |
||||
inverted={this.inverted} |
||||
bordered |
||||
> |
||||
<Logo /> |
||||
<div class={styles.nav}> |
||||
<NMenu |
||||
mode='horizontal' |
||||
onUpdate:value={this.handleMenuClick} |
||||
defaultValue={this.defaultMenuKey} |
||||
class={styles.menu} |
||||
inverted={this.inverted} |
||||
options={this.menuOptions} |
||||
/> |
||||
<div class={styles.profile}> |
||||
<NDropdown inverted={this.inverted} options={this.languageOptions}> |
||||
<span> |
||||
中文 |
||||
<NIcon class={styles.icon}> |
||||
<IosArrowDown /> |
||||
</NIcon> |
||||
</span> |
||||
</NDropdown> |
||||
<NDropdown inverted={this.inverted} options={this.profileOptions}> |
||||
<span> |
||||
<NIcon class={styles.icon}> |
||||
<UserAlt /> |
||||
</NIcon> |
||||
admin |
||||
<NIcon class={styles.icon}> |
||||
<IosArrowDown /> |
||||
</NIcon> |
||||
</span> |
||||
</NDropdown> |
||||
</div> |
||||
</div> |
||||
</NLayoutHeader> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export { Header } |
||||
@ -1,36 +0,0 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
.logo { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
height: 64px; |
||||
line-height: 64px; |
||||
overflow: hidden; |
||||
white-space: nowrap; |
||||
width: 280px; |
||||
|
||||
img { |
||||
width: auto; |
||||
height: 46px; |
||||
} |
||||
|
||||
.title { |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
@ -1,34 +0,0 @@
|
||||
/* |
||||
* 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 } from 'vue' |
||||
|
||||
import styles from './index.module.scss' |
||||
|
||||
const Logo = defineComponent({ |
||||
name: 'Logo', |
||||
setup() {}, |
||||
render() { |
||||
return ( |
||||
<div class={styles.logo}> |
||||
<img src='./src/assets/images/nav-logo.svg' alt='' /> |
||||
</div> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default Logo |
||||
@ -1,19 +0,0 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
.sider-model { |
||||
} |
||||
@ -1,78 +0,0 @@
|
||||
/* |
||||
* 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, ref } from 'vue' |
||||
import { NLayoutSider, NMenu } from 'naive-ui' |
||||
|
||||
const Sider = defineComponent({ |
||||
name: 'Sider', |
||||
props: { |
||||
visible: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
inverted: { |
||||
type: Boolean, |
||||
default: true, |
||||
}, |
||||
menuOptions: { |
||||
type: Array, |
||||
default: [], |
||||
}, |
||||
currentMenu: { |
||||
type: Object, |
||||
}, |
||||
defaultMenuKey: { |
||||
type: String, |
||||
}, |
||||
}, |
||||
setup(props) { |
||||
const currentMenuRef = ref({}) |
||||
|
||||
const handleMenuClick = (key, data) => { |
||||
currentMenuRef.value = data |
||||
} |
||||
|
||||
return { handleMenuClick } |
||||
}, |
||||
render() { |
||||
return |
||||
this.visible ? ( |
||||
<NLayoutSider |
||||
width={240} |
||||
collapseMode={'width'} |
||||
collapsedWidth={64} |
||||
inverted={this.inverted} |
||||
nativeScrollbar={false} |
||||
show-trigger |
||||
bordered |
||||
> |
||||
<NMenu |
||||
onUpdate:value={this.handleMenuClick} |
||||
inverted={this.inverted} |
||||
collapsedWidth={64} |
||||
collapsedIconSize={22} |
||||
options={this.menuOptions} |
||||
/> |
||||
</NLayoutSider> |
||||
) : ( |
||||
'' |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export { Sider } |
||||
@ -1,54 +0,0 @@
|
||||
/* |
||||
* 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. |
||||
*/ |
||||
|
||||
.container { |
||||
.header-model { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
height: 60px; |
||||
box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 5px; |
||||
position: relative; |
||||
width: 100%; |
||||
padding: 0px; |
||||
margin: 0px; |
||||
.nav { |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
width: inherit; |
||||
.menu { |
||||
margin-left: 0px; |
||||
text-align: center; |
||||
font-size: 15px; |
||||
color: rgb(255, 255, 255); |
||||
} |
||||
.profile { |
||||
width: 135px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
.icon { |
||||
margin-right: 5px; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,234 +0,0 @@
|
||||
/* |
||||
* 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 { h, defineComponent, ref } from 'vue' |
||||
import styles from './index.module.scss' |
||||
import { useI18n } from 'vue-i18n' |
||||
import { |
||||
PersonCircleOutline, |
||||
LogOutOutline, |
||||
FileTrayFullOutline, |
||||
Server, |
||||
SettingsOutline, |
||||
} from '@vicons/ionicons5' |
||||
import { |
||||
HomeOutlined, |
||||
FolderOutlined, |
||||
SafetyCertificateOutlined, |
||||
UserOutlined, |
||||
} from '@vicons/antd' |
||||
import { Database, Notes, Users } from '@vicons/tabler' |
||||
import { MonitorFilled, AcUnitOutlined } from '@vicons/material' |
||||
import { Flow } from '@vicons/carbon' |
||||
import { Header } from './components/header' |
||||
import { Sider } from './components/sider' |
||||
import { NLayout, NLayoutContent, NIcon } from 'naive-ui' |
||||
|
||||
function renderIcon(icon) { |
||||
return () => h(NIcon, null, { default: () => h(icon) }) |
||||
} |
||||
|
||||
const switchLanguageOptions = [ |
||||
{ |
||||
label: 'English', |
||||
key: 'en', |
||||
}, |
||||
{ |
||||
label: '中文', |
||||
key: 'zh', |
||||
}, |
||||
] |
||||
|
||||
const profileOptions = [ |
||||
{ |
||||
label: '用户信息', |
||||
key: 'profile', |
||||
icon: renderIcon(PersonCircleOutline), |
||||
}, |
||||
{ |
||||
label: '退出登录', |
||||
key: 'logout', |
||||
icon: renderIcon(LogOutOutline), |
||||
}, |
||||
] |
||||
|
||||
const menuOptions = [ |
||||
{ |
||||
label: '首页', |
||||
key: 'home', |
||||
icon: renderIcon(HomeOutlined), |
||||
}, |
||||
{ |
||||
label: '项目管理', |
||||
key: 'project', |
||||
icon: renderIcon(Notes), |
||||
children: [ |
||||
{ |
||||
label: '项目', |
||||
key: 'projects-list', |
||||
icon: renderIcon(Notes), |
||||
}, |
||||
{ |
||||
label: '工作流监控', |
||||
key: 'projects-index', |
||||
icon: renderIcon(Flow), |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '资源中心', |
||||
key: 'resources', |
||||
icon: renderIcon(FolderOutlined), |
||||
children: [ |
||||
{ |
||||
label: '文件管理', |
||||
key: 'file', |
||||
icon: renderIcon(FileTrayFullOutline), |
||||
}, |
||||
{ |
||||
label: '创建资源', |
||||
key: 'resource-file-create', |
||||
icon: renderIcon(AcUnitOutlined), |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '数据源中心', |
||||
key: 'datasource', |
||||
icon: renderIcon(Database), |
||||
children: [ |
||||
{ |
||||
label: '数据源中心', |
||||
key: 'datasource-list', |
||||
icon: renderIcon(Database), |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '监控中心', |
||||
key: 'monitor', |
||||
icon: renderIcon(MonitorFilled), |
||||
children: [ |
||||
{ |
||||
key: 'servers-master', |
||||
title: '服务管理-Master', |
||||
icon: renderIcon(Server), |
||||
}, |
||||
{ |
||||
key: 'servers-worker', |
||||
title: '服务管理-Worker', |
||||
icon: renderIcon(SettingsOutline), |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
label: '安全中心', |
||||
key: 'security', |
||||
icon: renderIcon(SafetyCertificateOutlined), |
||||
children: [ |
||||
{ |
||||
key: 'tenement-manage', |
||||
label: '租户管理', |
||||
icon: renderIcon(UserOutlined), |
||||
}, |
||||
{ |
||||
key: 'users-manage', |
||||
label: '用户管理', |
||||
icon: renderIcon(Users), |
||||
}, |
||||
], |
||||
}, |
||||
] |
||||
|
||||
const basic = defineComponent({ |
||||
name: 'basic', |
||||
setup() { |
||||
const invertedRef = ref(true) |
||||
const hasSiderRef = ref(false) |
||||
const defaultMenuKeyRef = ref('home') |
||||
const currentMenuRef = ref({}) |
||||
const topMenuOptionsRef = ref([]) |
||||
const sideMenuOptionsRef = ref([]) |
||||
|
||||
const handleTopMenuClick = (data) => { |
||||
currentMenuRef.value = data |
||||
generateMenus() |
||||
} |
||||
|
||||
const handleSideMenuClick = (key, data) => { |
||||
console.log(data) |
||||
} |
||||
|
||||
const generateMenus = () => { |
||||
topMenuOptionsRef.value = [] |
||||
sideMenuOptionsRef.value = [] |
||||
hasSiderRef.value = false |
||||
menuOptions.forEach((option) => { |
||||
topMenuOptionsRef.value.push({ |
||||
label: option.label, |
||||
key: option.key, |
||||
icon: option.icon, |
||||
}) |
||||
if ( |
||||
currentMenuRef.value.key === option.key || |
||||
defaultMenuKeyRef.value === option.key |
||||
) { |
||||
if (option.hasOwnProperty('children') && option.children) { |
||||
sideMenuOptionsRef.value = option.children |
||||
hasSiderRef.value = true |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
generateMenus() |
||||
return { |
||||
topMenuOptionsRef, |
||||
sideMenuOptionsRef, |
||||
invertedRef, |
||||
hasSiderRef, |
||||
defaultMenuKeyRef, |
||||
handleTopMenuClick, |
||||
handleSideMenuClick, |
||||
} |
||||
}, |
||||
render() { |
||||
return ( |
||||
<NLayout class={styles.container}> |
||||
<Header |
||||
languageOptions={switchLanguageOptions} |
||||
profileOptions={profileOptions} |
||||
menuOptions={this.topMenuOptionsRef} |
||||
inverted={this.invertedRef} |
||||
defaultMenuKey={this.defaultMenuKeyRef} |
||||
onMenuClick={this.handleTopMenuClick} |
||||
/> |
||||
<NLayout hasSider> |
||||
<Sider |
||||
visible={this.hasSiderRef} |
||||
inverted={this.invertedRef} |
||||
menuOptions={this.sideMenuOptionsRef} |
||||
/> |
||||
<NLayoutContent> |
||||
<router-view /> |
||||
</NLayoutContent> |
||||
</NLayout> |
||||
</NLayout> |
||||
) |
||||
}, |
||||
}) |
||||
|
||||
export default basic |
||||
Loading…
Reference in new issue