Browse Source
* add layout * add layout * add layout * add routes * add routes * modify layout * modify layout * modify layout * modify layout * improve a few issues with code specification3.0.0/version-upgrade
calvin
3 years ago
committed by
GitHub
16 changed files with 981 additions and 38 deletions
|
After Width: | Height: | Size: 8.3 KiB |
@ -0,0 +1,52 @@ |
|||||||
|
/* |
||||||
|
* 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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,106 @@ |
|||||||
|
/* |
||||||
|
* 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 }; |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
/* |
||||||
|
* 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; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,38 @@ |
|||||||
|
/* |
||||||
|
* 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"; |
||||||
|
|
||||||
|
const Logo = defineComponent({ |
||||||
|
name: "Logo", |
||||||
|
setup() { |
||||||
|
const invertedRef = ref(true); |
||||||
|
|
||||||
|
return { invertedRef }; |
||||||
|
}, |
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div class={styles.logo}> |
||||||
|
<img src="../../../src/assets/images/nav-logo.svg" alt="" /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export { Logo }; |
||||||
@ -0,0 +1,19 @@ |
|||||||
|
/* |
||||||
|
* 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 { |
||||||
|
} |
||||||
@ -0,0 +1,79 @@ |
|||||||
|
/* |
||||||
|
* 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() { |
||||||
|
if (this.visible) { |
||||||
|
return ( |
||||||
|
<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> |
||||||
|
); |
||||||
|
} else { |
||||||
|
return ""; |
||||||
|
} |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
export { Sider }; |
||||||
@ -0,0 +1,54 @@ |
|||||||
|
/* |
||||||
|
* 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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,234 @@ |
|||||||
|
/* |
||||||
|
* 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; |
||||||
@ -0,0 +1,46 @@ |
|||||||
|
/* |
||||||
|
* 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 { toRaw } from "vue"; |
||||||
|
import { defineStore } from "pinia"; |
||||||
|
import RouteState from "./types"; |
||||||
|
import { RouteRecordRaw } from "vue-router"; |
||||||
|
|
||||||
|
export const useAsyncRouteStore = defineStore({ |
||||||
|
id: "route", |
||||||
|
state: (): RouteState => ({ |
||||||
|
menus: [], |
||||||
|
routers: [], |
||||||
|
addRouters: [], |
||||||
|
}), |
||||||
|
getters: { |
||||||
|
getMenus(): RouteRecordRaw[] { |
||||||
|
return this.menus; |
||||||
|
}, |
||||||
|
getRouters(): RouteRecordRaw[] { |
||||||
|
return toRaw(this.addRouters); |
||||||
|
}, |
||||||
|
}, |
||||||
|
actions: { |
||||||
|
setMenus(menus) { |
||||||
|
this.menus = menus; |
||||||
|
}, |
||||||
|
async generateRouters(routes) { |
||||||
|
console.log(routes); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}); |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
/* |
||||||
|
* 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 { RouteRecordRaw } from "vue-router"; |
||||||
|
|
||||||
|
interface RouteState { |
||||||
|
menus: RouteRecordRaw[]; |
||||||
|
routers: any[]; |
||||||
|
addRouters: any[]; |
||||||
|
} |
||||||
|
|
||||||
|
export default RouteState; |
||||||
Loading…
Reference in new issue