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