lolosia/lolosia-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改顶端组件实现方式，现支持左中右分区NavBar

Browse Source
This commit is contained in:
洛洛希雅Lolosia 2023-02-28 16:41:32 +08:00
parent 53d599c2f0
commit 4150e939a9
8 changed files with 344 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -5,31 +5,9 @@
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title> <title><%= title %></title>
<style>
.app-navs-frame {
position: absolute;
right: 0;
top: 0;
height: 50px;
z-index: 2;
display: flex;
align-items: center;
}
#app-navs > * {
margin: 0 12px;
}
#app-navs .el-form-item{
margin-bottom: 0;
}
</style>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<div class="app-navs-frame">
<div id="app-navs"></div>
<div id="app-navs-system"></div>
</div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

82
src/components/AppPage.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div>
<slot/>
<slot v-if="false" name="left"/>
<slot v-if="false" name="center"/>
<slot v-if="false" name="right"/>
</div>
</template>
<script lang="ts">
import type { VNode } from 'vue'
import { useBasicStore } from '@/store/basic'
export default defineComponent({
name: 'AppPage',
data() {
return {
left: [] as VNode[],
right: [] as VNode[],
center: [] as VNode[],
default: [] as VNode[]
}
},
mounted() {
this.onShowing()
},
activated() {
this.onShowing()
},
beforeUnmount() {
this.onHide()
},
deactivated() {
this.onHide()
},
created() {
const { navbar } = useBasicStore()
const { left, right, center, default: d } = this.$slots
this.left = left?.() ?? []
this.right = right?.() ?? []
this.center = center?.() ?? []
this.default = d?.() ?? []
navbar.left.push(...this.left)
navbar.right.push(...this.right)
navbar.center.push(...this.center)
},
methods: {
onShowing() {
const { left, right, center } = useBasicStore().navbar
const pair = [
[left, this.left],
[right, this.right],
[center, this.center]
]
for (const [s, l] of pair) {
for (const item of s) {
if (!l.includes(item)) l.push(item)
}
}
},
onHide() {
const { left, right, center } = useBasicStore().navbar
const pair = [
[left, this.left],
[right, this.right],
[center, this.center]
]
for (const [s, l] of pair) {
for (const item of l) {
const index = s.indexOf(item)
if (index > -1) s.splice(index, 1)
}
}
}
},
})
</script>
<style scoped lang="scss">
</style>

4
src/layout/app-main/Hamburger.vue
View File

@ -12,10 +12,10 @@ defineProps({
default: false default: false
} }
}) })
const emit = defineEmits(['toggleClick']) const emit = defineEmits(['toggle-click'])
//切换左侧栏关闭和隐藏 //切换左侧栏关闭和隐藏
const toggleClick = () => { const toggleClick = () => {
emit('toggleClick') emit('toggle-click')
} }
</script> </script>

153
src/layout/app-main/Navbar.vue
View File

@ -1,96 +1,144 @@
<template> <template>
<div class="navbar rowBC reset-el-dropdown"> <div class="navbar reset-el-dropdown">
<div class="navbar-left">
<div class="rowSC"> <div class="rowSC">
<!-- 切换sidebar按钮 --> <!-- 切换sidebar按钮 -->
<hamburger <hamburger
v-if="settings.showHamburger" v-if="settings.showHamburger"
:is-active="sidebar.opened" :is-active="sidebar.opened"
class="hamburger-container" class="hamburger-container"
@toggleClick="toggleSideBar" @toggle-click="toggleSideBar"
/> />
<!-- 面包屑导航 --> <!-- 面包屑导航 -->
<breadcrumb class="breadcrumb-container" /> <breadcrumb class="breadcrumb-container" />
</div> </div>
<component :is="item" v-for="(item, i) of navbar.left" :key="i"/>
</div>
<div class="navbar-center">
<!--导航标题--> <!--导航标题-->
<div v-if="settings.showNavbarTitle" class="heardCenterTitle">{{ settings.title }}</div> <div v-if="settings.showNavbarTitle" class="heardCenterTitle">{{ settings.title }}</div>
<component :is="item" v-for="(item, i) of navbar.center" :key="i"/>
</div>
<div class="navbar-right">
<component :is="item" v-for="(item, i) of navbar.right" :key="i"/>
<!-- 下拉操作菜单 --> <!-- 下拉操作菜单 -->
<teleport to="#app-navs-system">
<div v-if="settings.ShowDropDown" class="right-menu rowSC"> <div v-if="settings.ShowDropDown" class="right-menu rowSC">
<!-- <ScreenFull />--> <!-- <ScreenFull />-->
<!-- <ScreenLock />--> <!-- <ScreenLock />-->
<!-- <ThemeSelect />--> <!-- <ThemeSelect />-->
<!-- <SizeSelect />--> <!-- <SizeSelect />-->
<!-- <LangSelect />--> <!-- <LangSelect />-->
<el-dropdown trigger="click" size="medium"> <el-dropdown trigger="click" size="medium">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img src="https://github.jzfai.top/file/images/nav-right-logo.gif" class="user-avatar" /> <img src="https://github.jzfai.top/file/images/nav-right-logo.gif" class="user-avatar" />
<!-- <CaretBottom style="width: 1em; height: 1em; margin-left: 4px" />-->
</div> </div>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<router-link to="/"> <router-link to="/">
<el-dropdown-item>{{ langTitle('Home') }}</el-dropdown-item> <el-dropdown-item>{{ langTitle("Home") }}</el-dropdown-item>
</router-link> </router-link>
<a target="_blank" href="https://github.com/jzfai/vue3-admin-plus"> <a target="_blank" href="https://github.com/jzfai/vue3-admin-plus">
<el-dropdown-item>{{ langTitle('Github') }}</el-dropdown-item> <el-dropdown-item>{{ langTitle("Github") }}</el-dropdown-item>
</a> </a>
<a target="_blank" href="https://github.jzfai.top/low-code-platform"> <a target="_blank" href="https://github.jzfai.top/low-code-platform">
<el-dropdown-item>{{ langTitle('LowCodePlatFrom') }}</el-dropdown-item> <el-dropdown-item>{{ langTitle("LowCodePlatFrom") }}</el-dropdown-item>
</a> </a>
<!--<el-dropdown-item>修改密码</el-dropdown-item>--> <el-dropdown-item divided @click="loginOut">{{ langTitle("login out") }}</el-dropdown-item>
<el-dropdown-item divided @click="loginOut">{{ langTitle('login out') }}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</teleport> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { nextTick } from 'vue' import { nextTick } from "vue";
import { CaretBottom } from '@element-plus/icons-vue' import { useRouter } from "vue-router";
import { useRouter } from 'vue-router' import Breadcrumb from "./Breadcrumb.vue";
import Breadcrumb from './Breadcrumb.vue' import Hamburger from "./Hamburger.vue";
import Hamburger from './Hamburger.vue' import LangSelect from "./component/LangSelect.vue";
import LangSelect from './component/LangSelect.vue' import ScreenFull from "./component/ScreenFull.vue";
import ScreenFull from './component/ScreenFull.vue' import SizeSelect from "./component/SizeSelect.vue";
import SizeSelect from './component/SizeSelect.vue' import ThemeSelect from "./component/ThemeSelect.vue";
import ThemeSelect from './component/ThemeSelect.vue' import ScreenLock from "./component/ScreenLock.vue";
import ScreenLock from './component/ScreenLock.vue' import { resetState } from "@/hooks/use-permission";
import { resetState } from '@/hooks/use-permission' import { elMessage } from "@/hooks/use-element";
import { elMessage } from '@/hooks/use-element' import { useBasicStore } from "@/store/basic";
import { useBasicStore } from '@/store/basic' import { langTitle } from "@/hooks/use-common";
import { langTitle } from '@/hooks/use-common'
const basicStore = useBasicStore();
const { settings, sidebar, setToggleSideBar, navbar } = basicStore;
const basicStore = useBasicStore()
const { settings, sidebar, setToggleSideBar } = basicStore
const toggleSideBar = () => { const toggleSideBar = () => {
setToggleSideBar() setToggleSideBar();
} };
//退出登录 //退出登录
const router = useRouter() const router = useRouter();
const loginOut = () => { const loginOut = () => {
elMessage('退出登录成功') elMessage("退出登录成功");
router.push(`/login?redirect=/`) router.push(`/login?redirect=/`);
nextTick(() => { nextTick(() => {
resetState() resetState();
}) });
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.navbar { .navbar {
height: var(--nav-bar-height); height: var(--nav-bar-height);
overflow: hidden; overflow: hidden;
position: relative;
background: var(--nav-bar-background); background: var(--nav-bar-background);
box-shadow: var(--nav-bar-box-shadow); box-shadow: var(--nav-bar-box-shadow);
z-index: 1; z-index: 1;
} display: flex;
align-items: center;
.navbar-left{
flex: 1 0 0;
display: flex;
align-items: center;
> * {
margin-right: 1em;
}
}
.navbar-center{
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
> * {
margin: 0.5em;
}
}
.navbar-right{
flex: 1 0 0;
display: flex;
align-items: center;
justify-content: flex-end;
> *{
margin-left: 1em;
}
}
//logo //center-title
.avatar-wrapper { .heardCenterTitle {
text-align: center;
position: absolute;
top: 50%;
left: 46%;
font-weight: 600;
font-size: 20px;
transform: translate(-50%, -50%);
}
//drop-down
.right-menu {
cursor: pointer;
margin-right: 16px;
background-color: var(--nav-bar-right-menu-background);
//logo
.avatar-wrapper {
margin-top: 5px; margin-top: 5px;
position: relative; position: relative;
cursor: pointer; cursor: pointer;
@ -109,23 +157,8 @@ const loginOut = () => {
top: 25px; top: 25px;
font-size: 12px; font-size: 12px;
} }
}
}
} }
//center-title
.heardCenterTitle {
text-align: center;
position: absolute;
top: 50%;
left: 46%;
font-weight: 600;
font-size: 20px;
transform: translate(-50%, -50%);
}
//drop-down
.right-menu {
cursor: pointer;
margin-right: 16px;
background-color: var(--nav-bar-right-menu-background);
}
</style> </style>

8
src/store/basic.ts
View File

@ -1,3 +1,4 @@
import type { VNode } from 'vue'
import { nextTick } from 'vue' import { nextTick } from 'vue'
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import type { RouterTypes } from '~/basic' import type { RouterTypes } from '~/basic'
@ -22,7 +23,12 @@ export const useBasicStore = defineStore('basic', {
sidebar: { opened: true }, sidebar: { opened: true },
//axios req collection //axios req collection
axiosPromiseArr: [] as Array<ObjKeys>, axiosPromiseArr: [] as Array<ObjKeys>,
settings: defaultSettings settings: defaultSettings,
navbar: {
left: [] as VNode[],
right: [] as VNode[],
center: [] as VNode[]
}
} }
}, },
persist: { persist: {

15
src/views/menuManagement/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="menuManagement-container"> <app-page class="menuManagement-container">
<!-- <vab-query-form>--> <!-- <vab-query-form>-->
<!-- <vab-query-form-left-panel :span="4">--> <!-- <vab-query-form-left-panel :span="4">-->
<!-- <last-breadcrumb class="page-breadcrumb"/>--> <!-- <last-breadcrumb class="page-breadcrumb"/>-->
@ -7,13 +7,12 @@
<!-- <vab-query-form-right-panel :span="20">--> <!-- <vab-query-form-right-panel :span="20">-->
<!-- </vab-query-form-right-panel>--> <!-- </vab-query-form-right-panel>-->
<!-- </vab-query-form>--> <!-- </vab-query-form>-->
<teleport to="#app-navs"> <template #right>
<el-button type="primary" @click="handleEdit()">添加</el-button> <el-button type="primary" @click="handleEdit()">添加</el-button>
</teleport> </template>
<div class="container-inner"> <div class="container-inner">
<el-table <el-table
v-loading="listLoading" v-loading="listLoading"
:height="height"
:data="list" :data="list"
:element-loading-text="elementLoadingText" :element-loading-text="elementLoadingText"
row-key="path" row-key="path"
@ -79,15 +78,16 @@
</el-table> </el-table>
<edit ref="edit" :menu-data="menuData" @fetch-data="fetchData"/> <edit ref="edit" :menu-data="menuData" @fetch-data="fetchData"/>
</div> </div>
</div> </app-page>
</template> </template>
<script> <script>
import { doDelete, getTree } from '@/api/menuManagement' import { doDelete, getTree } from '@/api/menuManagement'
import Edit from './components/MenuManagementEdit.vue' import Edit from './components/MenuManagementEdit.vue'
import AppPage from "@/components/AppPage.vue";
export default { export default {
name: 'MenuManagement', name: 'MenuManagement',
components: { Edit }, components: { Edit, AppPage },
data() { data() {
return { return {
data: [], data: [],
@ -101,9 +101,6 @@
} }
}, },
computed: { computed: {
height() {
return 'auto'
},
menuData() { menuData() {
return this.list return this.list
}, },

98
src/views/roleManagement/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="roleManagement-container"> <app-page class="roleManagement-container">
<teleport to="#app-navs"> <template #right>
<el-form :inline="true" :model="queryForm" class="nav" @submit.prevent> <el-form :inline="true" :model="queryForm" class="nav" @submit.prevent>
<el-form-item> <el-form-item>
<el-input <el-input
@ -29,7 +29,7 @@
<!-- </el-button>--> <!-- </el-button>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
</el-form> </el-form>
</teleport> </template>
<div class="container-inner"> <div class="container-inner">
<el-table <el-table
v-loading="listLoading" v-loading="listLoading"
@ -38,7 +38,6 @@
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:header-cell-style="{ background: '#F7F9FB', textAlign: 'center' }" :header-cell-style="{ background: '#F7F9FB', textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
:height="height"
@selection-change="setSelectRows" @selection-change="setSelectRows"
> >
<!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column>--> <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column>-->
@ -68,10 +67,10 @@
<el-table-column label="操作" width="200"> <el-table-column label="操作" width="200">
<template #default="{ row }"> <template #default="{ row }">
<el-button class="icon" type="primary" link @click="handleEdit(row)"> <el-button class="icon" type="primary" link @click="handleEdit(row)">
<i class="bi bi-pencil-square"/> <i class="bi bi-pencil-square" />
</el-button> </el-button>
<el-button class="icon" type="primary" link @click="handleDestroy(row)"> <el-button class="icon" type="primary" link @click="handleDestroy(row)">
<i class="bi bi-trash"/> <i class="bi bi-trash" />
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -86,50 +85,46 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/> />
<edit ref="edit" @fetch-data="fetchData"/> <edit ref="edit" @fetch-data="fetchData" />
</div>
</div> </div>
</app-page>
</template> </template>
<script> <script>
import { doDelete, getList } from '@/api/roleManagement' import { doDelete, getList } from "@/api/roleManagement";
import Edit from './components/RoleManagementEdit.vue' import Edit from "./components/RoleManagementEdit.vue";
import AppPage from "@/components/AppPage.vue";
export default { export default {
name: 'RoleManagement', name: "RoleManagement",
components: { Edit }, components: { Edit, AppPage },
data() { data() {
return { return {
list: null, list: null,
listLoading: true, listLoading: true,
layout: 'total, sizes, prev, pager, next, jumper', layout: "total, sizes, prev, pager, next, jumper",
total: 0, total: 0,
selectRows: '', selectRows: "",
elementLoadingText: '正在加载...', elementLoadingText: "正在加载...",
queryForm: { queryForm: {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
roleName: '', roleName: ""
},
} }
}, };
computed: {
height() {
return 'auto'
},
}, },
created() { created() {
this.fetchData() this.fetchData();
}, },
methods: { methods: {
setSelectRows(val) { setSelectRows(val) {
this.selectRows = val this.selectRows = val;
}, },
handleEdit(row) { handleEdit(row) {
if (row.id) { if (row.id) {
this.$refs['edit'].showEdit(row) this.$refs["edit"].showEdit(row);
} else { } else {
this.$refs['edit'].showEdit() this.$refs["edit"].showEdit();
} }
}, },
async handleDestroy(row) { async handleDestroy(row) {
@ -152,41 +147,50 @@
// return false // return false
// } // }
// } // }
const rs = await elConfirmNoCancelBtn(null, '你确定要删除当前项吗'); const rs = await elConfirmNoCancelBtn(null, "你确定要删除当前项吗");
if (rs !== "confirm") return; if (rs !== "confirm") return;
const { msg } = await doDelete({ const { msg } = await doDelete({
id: row.id, id: row.id
}) });
elMessage(msg, 'success') elMessage(msg, "success");
this.fetchData() this.fetchData();
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.queryForm.pageSize = val this.queryForm.pageSize = val;
this.fetchData() this.fetchData();
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.queryForm.pageNo = val this.queryForm.pageNo = val;
this.fetchData() this.fetchData();
}, },
queryData() { queryData() {
this.queryForm.pageNo = 1 this.queryForm.pageNo = 1;
this.fetchData() this.fetchData();
}, },
async fetchData() { async fetchData() {
this.listLoading = true this.listLoading = true;
const { data } = await getList(this.queryForm) const { data } = await getList(this.queryForm);
this.list = data.rows this.list = data.rows;
this.total = data.total this.total = data.total;
setTimeout(() => { setTimeout(() => {
this.listLoading = false this.listLoading = false;
}, 300) }, 300);
},
},
} }
}
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.icon{ .nav > * {
margin-bottom: 0;
margin-right: 1em;
&:last-child {
margin-right: 0;
}
}
.icon {
font-size: 1.5em !important; font-size: 1.5em !important;
padding: 5px !important; padding: 5px !important;
} }

2
typings/components.d.ts vendored
View File

@ -7,6 +7,8 @@ export {}
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
AppPage: typeof import('./../src/components/AppPage.vue')['default']
Container: typeof import('@/components/AppPage.vue')['default']
ElSvgIcon: typeof import('./../src/components/ElSvgIcon.vue')['default'] ElSvgIcon: typeof import('./../src/components/ElSvgIcon.vue')['default']
IconSelector: typeof import('./../src/components/IconSelector.vue')['default'] IconSelector: typeof import('./../src/components/IconSelector.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']