feat: 导航top
This commit is contained in:
april
parent
4af2c0acdf
commit
cc721dfba1
|
|
@ -10,7 +10,7 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app" class="app"></div>
|
||||||
<script type="module" src="/src/main.ts"></script>
|
<script type="module" src="/src/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
17
package.json
17
package.json
|
|
@ -46,28 +46,31 @@
|
||||||
"@wangeditor/editor": "^5.1.23",
|
"@wangeditor/editor": "^5.1.23",
|
||||||
"@wangeditor/editor-for-vue": "5.1.10",
|
"@wangeditor/editor-for-vue": "5.1.10",
|
||||||
"axios": "^1.4.0",
|
"axios": "^1.4.0",
|
||||||
|
"codemirror": "^5.65.13",
|
||||||
"echarts": "^5.2.2",
|
"echarts": "^5.2.2",
|
||||||
"element-plus": "^2.3.9",
|
"element-plus": "^2.3.9",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
|
"mockjs": "^1.1.0",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
"path-to-regexp": "^6.2.0",
|
"path-to-regexp": "^6.2.0",
|
||||||
"pinia": "^2.0.33",
|
"pinia": "^2.0.33",
|
||||||
"screenfull": "^6.0.0",
|
"screenfull": "^6.0.0",
|
||||||
|
"sortablejs": "^1.15.0",
|
||||||
"vue": "^3.3.4",
|
"vue": "^3.3.4",
|
||||||
"vue-i18n": "9.2.2",
|
"vue-i18n": "9.2.2",
|
||||||
"vue-router": "^4.2.0",
|
"vue-router": "^4.2.0",
|
||||||
"xlsx": "^0.18.5",
|
"xlsx": "^0.18.5"
|
||||||
"sortablejs": "^1.15.0",
|
|
||||||
"codemirror": "^5.65.13"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^17.6.3",
|
"@commitlint/cli": "^17.6.3",
|
||||||
"@commitlint/config-conventional": "^17.6.3",
|
"@commitlint/config-conventional": "^17.6.3",
|
||||||
"@iconify-json/ep": "^1.1.10",
|
"@iconify-json/ep": "^1.1.10",
|
||||||
|
"@types/codemirror": "^5.60.7",
|
||||||
"@types/lodash": "^4.14.195",
|
"@types/lodash": "^4.14.195",
|
||||||
"@types/nprogress": "^0.2.0",
|
"@types/nprogress": "^0.2.0",
|
||||||
"@types/path-browserify": "^1.0.0",
|
"@types/path-browserify": "^1.0.0",
|
||||||
|
"@types/sortablejs": "^1.15.1",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
"@typescript-eslint/eslint-plugin": "^5.59.6",
|
||||||
"@typescript-eslint/parser": "^5.59.6",
|
"@typescript-eslint/parser": "^5.59.6",
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
|
|
@ -85,6 +88,7 @@
|
||||||
"postcss-html": "^1.5.0",
|
"postcss-html": "^1.5.0",
|
||||||
"postcss-scss": "^4.0.6",
|
"postcss-scss": "^4.0.6",
|
||||||
"prettier": "^2.8.8",
|
"prettier": "^2.8.8",
|
||||||
|
"rollup-plugin-visualizer": "^5.9.2",
|
||||||
"sass": "^1.58.3",
|
"sass": "^1.58.3",
|
||||||
"stylelint": "^15.10.2",
|
"stylelint": "^15.10.2",
|
||||||
"stylelint-config-html": "^1.1.0",
|
"stylelint-config-html": "^1.1.0",
|
||||||
|
|
@ -99,13 +103,10 @@
|
||||||
"unplugin-icons": "^0.16.1",
|
"unplugin-icons": "^0.16.1",
|
||||||
"unplugin-vue-components": "^0.24.1",
|
"unplugin-vue-components": "^0.24.1",
|
||||||
"vite": "^4.4.2",
|
"vite": "^4.4.2",
|
||||||
"vite-plugin-svg-icons": "^2.0.1",
|
|
||||||
"vue-tsc": "^1.7.0 ",
|
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-mock": "^3.0.0",
|
"vite-plugin-mock": "^3.0.0",
|
||||||
"rollup-plugin-visualizer": "^5.9.2",
|
"vite-plugin-svg-icons": "^2.0.1",
|
||||||
"@types/codemirror": "^5.60.7",
|
"vue-tsc": "^1.7.0 "
|
||||||
"@types/sortablejs": "^1.15.1"
|
|
||||||
},
|
},
|
||||||
"repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
|
"repository": "https://gitee.com/youlaiorg/vue3-element-admin.git",
|
||||||
"author": "有来开源组织",
|
"author": "有来开源组织",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,120 @@
|
||||||
|
<template>
|
||||||
|
<!-- 导航栏设置(窄屏隐藏)-->
|
||||||
|
<div v-if="device !== 'mobile'" class="setting-container">
|
||||||
|
<!--全屏 -->
|
||||||
|
<div class="setting-item" @click="toggle">
|
||||||
|
<svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" />
|
||||||
|
</div>
|
||||||
|
<!-- 布局大小 -->
|
||||||
|
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||||
|
<size-select class="setting-item" />
|
||||||
|
</el-tooltip>
|
||||||
|
<!--语言选择-->
|
||||||
|
<lang-select class="setting-item" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 用户头像 -->
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<div class="avatar-container">
|
||||||
|
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
|
||||||
|
<i-ep-caret-bottom class="w-3 h-3" />
|
||||||
|
</div>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<router-link to="/">
|
||||||
|
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
|
||||||
|
</router-link>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://github.com/youlaitech/vue3-element-admin"
|
||||||
|
>
|
||||||
|
<el-dropdown-item>Github</el-dropdown-item>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" href="https://gitee.com/haoxr">
|
||||||
|
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
|
||||||
|
</a>
|
||||||
|
<a target="_blank" href="https://juejin.cn/post/7228990409909108793">
|
||||||
|
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
|
||||||
|
</a>
|
||||||
|
<el-dropdown-item divided @click="logout">
|
||||||
|
{{ $t("navbar.logout") }}
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts" name="navRight">
|
||||||
|
import { storeToRefs } from "pinia";
|
||||||
|
import { useRoute, useRouter } from "vue-router";
|
||||||
|
import { useAppStore } from "@/store/modules/app";
|
||||||
|
import { useTagsViewStore } from "@/store/modules/tagsView";
|
||||||
|
import { useUserStore } from "@/store/modules/user";
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
const tagsViewStore = useTagsViewStore();
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
|
||||||
|
|
||||||
|
/**
|
||||||
|
* vueUse 全屏
|
||||||
|
*/
|
||||||
|
const { isFullscreen, toggle } = useFullscreen();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 注销
|
||||||
|
*/
|
||||||
|
function logout() {
|
||||||
|
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(() => {
|
||||||
|
userStore
|
||||||
|
.logout()
|
||||||
|
.then(() => {
|
||||||
|
tagsViewStore.delAllViews();
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
router.push(`/login?redirect=${route.fullPath}`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.setting-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.setting-item {
|
||||||
|
display: inline-block;
|
||||||
|
width: 30px;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
color: #5a5e66;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgb(249 250 251 / 100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-items: center;
|
||||||
|
margin: 0 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { useAppStore } from "@/store/modules/app";
|
||||||
|
|
||||||
|
const appStore = useAppStore();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 左侧菜单栏显示/隐藏
|
||||||
|
*/
|
||||||
|
function toggleSideBar() {
|
||||||
|
appStore.toggleSidebar(true);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- 顶部导航栏 -->
|
||||||
|
<div class="navbar">
|
||||||
|
<!-- 左侧面包屑 -->
|
||||||
|
<div class="flex">
|
||||||
|
<hamburger
|
||||||
|
:is-active="appStore.sidebar.opened"
|
||||||
|
@toggle-click="toggleSideBar"
|
||||||
|
/>
|
||||||
|
<breadcrumb />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧导航设置 -->
|
||||||
|
<div class="flex">
|
||||||
|
<NavRight />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 0 1px #0003;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,158 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { storeToRefs } from "pinia";
|
|
||||||
import { useRoute, useRouter } from "vue-router";
|
|
||||||
import { useAppStore } from "@/store/modules/app";
|
|
||||||
import { useTagsViewStore } from "@/store/modules/tagsView";
|
|
||||||
import { useUserStore } from "@/store/modules/user";
|
|
||||||
|
|
||||||
const appStore = useAppStore();
|
|
||||||
const tagsViewStore = useTagsViewStore();
|
|
||||||
const userStore = useUserStore();
|
|
||||||
|
|
||||||
const route = useRoute();
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const { device } = storeToRefs(appStore); // 设备类型：desktop-宽屏设备 || mobile-窄屏设备
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 左侧菜单栏显示/隐藏
|
|
||||||
*/
|
|
||||||
function toggleSideBar() {
|
|
||||||
appStore.toggleSidebar(true);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* vueUse 全屏
|
|
||||||
*/
|
|
||||||
const { isFullscreen, toggle } = useFullscreen();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 注销
|
|
||||||
*/
|
|
||||||
function logout() {
|
|
||||||
ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
|
|
||||||
confirmButtonText: "确定",
|
|
||||||
cancelButtonText: "取消",
|
|
||||||
type: "warning",
|
|
||||||
}).then(() => {
|
|
||||||
userStore
|
|
||||||
.logout()
|
|
||||||
.then(() => {
|
|
||||||
tagsViewStore.delAllViews();
|
|
||||||
})
|
|
||||||
.then(() => {
|
|
||||||
router.push(`/login?redirect=${route.fullPath}`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<!-- 顶部导航栏 -->
|
|
||||||
<div class="navbar">
|
|
||||||
<!-- 左侧面包屑 -->
|
|
||||||
<div class="flex">
|
|
||||||
<hamburger
|
|
||||||
:is-active="appStore.sidebar.opened"
|
|
||||||
@toggle-click="toggleSideBar"
|
|
||||||
/>
|
|
||||||
<breadcrumb />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 右侧导航设置 -->
|
|
||||||
<div class="flex">
|
|
||||||
<!-- 导航栏设置(窄屏隐藏)-->
|
|
||||||
<div v-if="device !== 'mobile'" class="setting-container">
|
|
||||||
<!--全屏 -->
|
|
||||||
<div class="setting-item" @click="toggle">
|
|
||||||
<svg-icon
|
|
||||||
:icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<!-- 布局大小 -->
|
|
||||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
|
||||||
<size-select class="setting-item" />
|
|
||||||
</el-tooltip>
|
|
||||||
<!--语言选择-->
|
|
||||||
<lang-select class="setting-item" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 用户头像 -->
|
|
||||||
<el-dropdown trigger="click">
|
|
||||||
<div class="avatar-container">
|
|
||||||
<img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
|
|
||||||
<i-ep-caret-bottom class="w-3 h-3" />
|
|
||||||
</div>
|
|
||||||
<template #dropdown>
|
|
||||||
<el-dropdown-menu>
|
|
||||||
<router-link to="/">
|
|
||||||
<el-dropdown-item>{{ $t("navbar.dashboard") }}</el-dropdown-item>
|
|
||||||
</router-link>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://github.com/youlaitech/vue3-element-admin"
|
|
||||||
>
|
|
||||||
<el-dropdown-item>Github</el-dropdown-item>
|
|
||||||
</a>
|
|
||||||
<a target="_blank" href="https://gitee.com/haoxr">
|
|
||||||
<el-dropdown-item>{{ $t("navbar.gitee") }}</el-dropdown-item>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://juejin.cn/post/7228990409909108793"
|
|
||||||
>
|
|
||||||
<el-dropdown-item>{{ $t("navbar.document") }}</el-dropdown-item>
|
|
||||||
</a>
|
|
||||||
<el-dropdown-item divided @click="logout">
|
|
||||||
{{ $t("navbar.logout") }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</template>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.navbar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 50px;
|
|
||||||
background-color: #fff;
|
|
||||||
box-shadow: 0 0 1px #0003;
|
|
||||||
|
|
||||||
.setting-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.setting-item {
|
|
||||||
display: inline-block;
|
|
||||||
width: 30px;
|
|
||||||
height: 50px;
|
|
||||||
line-height: 50px;
|
|
||||||
color: #5a5e66;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: rgb(249 250 251 / 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: center;
|
|
||||||
margin: 0 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -34,7 +34,7 @@ const themeColors = ref<string[]>([
|
||||||
*/
|
*/
|
||||||
function changeThemeColor(color: string) {
|
function changeThemeColor(color: string) {
|
||||||
document.documentElement.style.setProperty("--el-color-primary", color);
|
document.documentElement.style.setProperty("--el-color-primary", color);
|
||||||
settingsStore.changeSetting({ key: "layout", value: color });
|
// settingsStore.changeSetting({ key: "layout", value: color });
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|
@ -94,7 +94,7 @@ onMounted(() => {
|
||||||
<li
|
<li
|
||||||
:class="
|
:class="
|
||||||
'layout-item layout-left ' +
|
'layout-item layout-left ' +
|
||||||
(settingsStore.layout == 'left' ? 'is-active' : '')
|
(settingsStore.layout === 'left' ? 'is-active' : '')
|
||||||
"
|
"
|
||||||
@click="changeLayout('left')"
|
@click="changeLayout('left')"
|
||||||
>
|
>
|
||||||
|
|
@ -106,7 +106,7 @@ onMounted(() => {
|
||||||
<li
|
<li
|
||||||
:class="
|
:class="
|
||||||
'layout-item layout-top ' +
|
'layout-item layout-top ' +
|
||||||
(settingsStore.layout == 'top' ? 'is-active' : '')
|
(settingsStore.layout === 'top' ? 'is-active' : '')
|
||||||
"
|
"
|
||||||
@click="changeLayout('top')"
|
@click="changeLayout('top')"
|
||||||
>
|
>
|
||||||
|
|
@ -118,7 +118,7 @@ onMounted(() => {
|
||||||
<li
|
<li
|
||||||
:class="
|
:class="
|
||||||
'layout-item layout-mix ' +
|
'layout-item layout-mix ' +
|
||||||
(settingsStore.layout == 'mix' ? 'is-active' : '')
|
(settingsStore.layout === 'mix' ? 'is-active' : '')
|
||||||
"
|
"
|
||||||
@click="changeLayout('mix')"
|
@click="changeLayout('mix')"
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,9 @@ const logo = ref(new URL(`../../../assets/logo.png`, import.meta.url).href);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)]">
|
<div
|
||||||
|
class="w-full h-[50px] bg-gray-800 dark:bg-[var(--el-bg-color-overlay)] logo-wrap"
|
||||||
|
>
|
||||||
<transition name="sidebarLogoFade">
|
<transition name="sidebarLogoFade">
|
||||||
<router-link
|
<router-link
|
||||||
v-if="collapse"
|
v-if="collapse"
|
||||||
|
|
|
||||||
|
|
@ -14,21 +14,32 @@ const permissionStore = usePermissionStore();
|
||||||
const appStore = useAppStore();
|
const appStore = useAppStore();
|
||||||
const currRoute = useRoute();
|
const currRoute = useRoute();
|
||||||
const { sidebarLogo } = storeToRefs(settingsStore);
|
const { sidebarLogo } = storeToRefs(settingsStore);
|
||||||
|
const layout = computed(() => settingsStore.layout);
|
||||||
|
const showContent = ref(true);
|
||||||
|
watch(
|
||||||
|
() => layout.value,
|
||||||
|
() => {
|
||||||
|
showContent.value = false;
|
||||||
|
nextTick(() => {
|
||||||
|
showContent.value = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="{ 'has-logo': sidebarLogo }">
|
<div :class="{ 'has-logo': sidebarLogo }" class="menu-wrap">
|
||||||
<logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
|
<logo v-if="sidebarLogo" :collapse="!appStore.sidebar.opened" />
|
||||||
<el-scrollbar>
|
<el-scrollbar v-if="showContent">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="currRoute.path"
|
:default-active="layout === 'top' ? '-' : currRoute.path"
|
||||||
:collapse="!appStore.sidebar.opened"
|
:collapse="!appStore.sidebar.opened"
|
||||||
:background-color="variables.menuBg"
|
:background-color="variables.menuBg"
|
||||||
:text-color="variables.menuText"
|
:text-color="variables.menuText"
|
||||||
:active-text-color="variables.menuActiveText"
|
:active-text-color="variables.menuActiveText"
|
||||||
:unique-opened="false"
|
:unique-opened="false"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
mode="vertical"
|
:mode="layout === 'top' ? 'horizontal' : 'vertical'"
|
||||||
>
|
>
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
v-for="route in permissionStore.routes"
|
v-for="route in permissionStore.routes"
|
||||||
|
|
@ -39,5 +50,19 @@ const { sidebarLogo } = storeToRefs(settingsStore);
|
||||||
/>
|
/>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
<NavRight v-if="layout === 'top'" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
:deep(.setting-container) {
|
||||||
|
.setting-item {
|
||||||
|
color: #fff;
|
||||||
|
.svg-icon {
|
||||||
|
margin-right: 0px;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
export { default as Navbar } from "./Navbar.vue";
|
export { default as Navbar } from "./Navbar/index.vue";
|
||||||
export { default as AppMain } from "./AppMain.vue";
|
export { default as AppMain } from "./AppMain.vue";
|
||||||
export { default as Settings } from "./Settings/index.vue";
|
export { default as Settings } from "./Settings/index.vue";
|
||||||
export { default as TagsView } from "./TagsView/index.vue";
|
export { default as TagsView } from "./TagsView/index.vue";
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,14 @@ const settingsStore = useSettingsStore();
|
||||||
const fixedHeader = computed(() => settingsStore.fixedHeader);
|
const fixedHeader = computed(() => settingsStore.fixedHeader);
|
||||||
const showTagsView = computed(() => settingsStore.tagsView);
|
const showTagsView = computed(() => settingsStore.tagsView);
|
||||||
const showSettings = computed(() => settingsStore.showSettings);
|
const showSettings = computed(() => settingsStore.showSettings);
|
||||||
|
const layout = computed(() => settingsStore.layout);
|
||||||
|
|
||||||
const classObj = computed(() => ({
|
const classObj = computed(() => ({
|
||||||
hideSidebar: !appStore.sidebar.opened,
|
hideSidebar: !appStore.sidebar.opened,
|
||||||
openSidebar: appStore.sidebar.opened,
|
openSidebar: appStore.sidebar.opened,
|
||||||
withoutAnimation: appStore.sidebar.withoutAnimation,
|
withoutAnimation: appStore.sidebar.withoutAnimation,
|
||||||
mobile: appStore.device === "mobile",
|
mobile: appStore.device === "mobile",
|
||||||
|
isTop: layout.value === "top",
|
||||||
}));
|
}));
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
|
|
@ -67,7 +69,7 @@ function handleOutsideClick() {
|
||||||
|
|
||||||
<div :class="{ hasTagsView: showTagsView }" class="main-container">
|
<div :class="{ hasTagsView: showTagsView }" class="main-container">
|
||||||
<div :class="{ 'fixed-header': fixedHeader }">
|
<div :class="{ 'fixed-header': fixedHeader }">
|
||||||
<navbar />
|
<navbar v-if="layout !== 'top'" />
|
||||||
<tags-view v-if="showTagsView" />
|
<tags-view v-if="showTagsView" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -126,4 +128,25 @@ function handleOutsideClick() {
|
||||||
background: #000;
|
background: #000;
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
// 导航栏顶部显示
|
||||||
|
.isTop {
|
||||||
|
.sidebar-container {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
z-index: 800;
|
||||||
|
:deep(.logo-wrap) {
|
||||||
|
width: 210px;
|
||||||
|
}
|
||||||
|
:deep(.el-scrollbar) {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main-container {
|
||||||
|
margin-left: 0px;
|
||||||
|
padding-top: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
#app {
|
.app {
|
||||||
.main-container {
|
.main-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -5,105 +5,104 @@
|
||||||
// Read more: https://github.com/vuejs/core/pull/3399
|
// Read more: https://github.com/vuejs/core/pull/3399
|
||||||
import '@vue/runtime-core'
|
import '@vue/runtime-core'
|
||||||
|
|
||||||
export {};
|
export { };
|
||||||
|
|
||||||
declare module "@vue/runtime-core" {
|
declare module "@vue/runtime-core" {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
AppMain: typeof import("./../layout/components/AppMain.vue")["default"];
|
AppMain: typeof import("./../layout/components/AppMain.vue")["default"];
|
||||||
BarChart: typeof import("./../views/dashboard/components/BarChart.vue")["default"];
|
BarChart: typeof import("./../views/dashboard/components/BarChart.vue")["default"];
|
||||||
Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
|
Breadcrumb: typeof import("./../components/Breadcrumb/index.vue")["default"];
|
||||||
Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
|
Dictionary: typeof import("./../components/Dictionary/index.vue")["default"];
|
||||||
ElAlert: typeof import("element-plus/es")["ElAlert"];
|
ElAlert: typeof import("element-plus/es")["ElAlert"];
|
||||||
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
|
ElBreadcrumb: typeof import("element-plus/es")["ElBreadcrumb"];
|
||||||
ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
|
ElBreadcrumbItem: typeof import("element-plus/es")["ElBreadcrumbItem"];
|
||||||
ElButton: typeof import("element-plus/es")["ElButton"];
|
ElButton: typeof import("element-plus/es")["ElButton"];
|
||||||
ElCard: typeof import("element-plus/es")["ElCard"];
|
ElCard: typeof import("element-plus/es")["ElCard"];
|
||||||
ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
|
ElCheckbox: typeof import("element-plus/es")["ElCheckbox"];
|
||||||
ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
|
ElCheckboxGroup: typeof import("element-plus/es")["ElCheckboxGroup"];
|
||||||
ElCol: typeof import("element-plus/es")["ElCol"];
|
ElCol: typeof import("element-plus/es")["ElCol"];
|
||||||
ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
|
ElDatePicker: typeof import("element-plus/es")["ElDatePicker"];
|
||||||
ElDialog: typeof import("element-plus/es")["ElDialog"];
|
ElDialog: typeof import("element-plus/es")["ElDialog"];
|
||||||
ElDivider: typeof import("element-plus/es")["ElDivider"];
|
ElDivider: typeof import("element-plus/es")["ElDivider"];
|
||||||
ElDropdown: typeof import("element-plus/es")["ElDropdown"];
|
ElDropdown: typeof import("element-plus/es")["ElDropdown"];
|
||||||
ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
|
ElDropdownItem: typeof import("element-plus/es")["ElDropdownItem"];
|
||||||
ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
|
ElDropdownMenu: typeof import("element-plus/es")["ElDropdownMenu"];
|
||||||
ElForm: typeof import("element-plus/es")["ElForm"];
|
ElForm: typeof import("element-plus/es")["ElForm"];
|
||||||
ElFormItem: typeof import("element-plus/es")["ElFormItem"];
|
ElFormItem: typeof import("element-plus/es")["ElFormItem"];
|
||||||
ElIcon: typeof import("element-plus/es")["ElIcon"];
|
ElIcon: typeof import("element-plus/es")["ElIcon"];
|
||||||
ElInput: typeof import("element-plus/es")["ElInput"];
|
ElInput: typeof import("element-plus/es")["ElInput"];
|
||||||
ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
|
ElInputNumber: typeof import("element-plus/es")["ElInputNumber"];
|
||||||
ElLink: typeof import("element-plus/es")["ElLink"];
|
ElLink: typeof import("element-plus/es")["ElLink"];
|
||||||
ElMenu: typeof import("element-plus/es")["ElMenu"];
|
ElMenu: typeof import("element-plus/es")["ElMenu"];
|
||||||
ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
|
ElMenuItem: typeof import("element-plus/es")["ElMenuItem"];
|
||||||
ElOption: typeof import("element-plus/es")["ElOption"];
|
ElOption: typeof import("element-plus/es")["ElOption"];
|
||||||
ElPagination: typeof import("element-plus/es")["ElPagination"];
|
ElPagination: typeof import("element-plus/es")["ElPagination"];
|
||||||
ElPopover: typeof import("element-plus/es")["ElPopover"];
|
ElPopover: typeof import("element-plus/es")["ElPopover"];
|
||||||
ElRadio: typeof import("element-plus/es")["ElRadio"];
|
ElRadio: typeof import("element-plus/es")["ElRadio"];
|
||||||
ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
|
ElRadioButton: typeof import("element-plus/es")["ElRadioButton"];
|
||||||
ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
|
ElRadioGroup: typeof import("element-plus/es")["ElRadioGroup"];
|
||||||
ElRate: typeof import("element-plus/es")["ElRate"];
|
ElRate: typeof import("element-plus/es")["ElRate"];
|
||||||
ElRow: typeof import("element-plus/es")["ElRow"];
|
ElRow: typeof import("element-plus/es")["ElRow"];
|
||||||
ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
|
ElScrollbar: typeof import("element-plus/es")["ElScrollbar"];
|
||||||
ElSelect: typeof import("element-plus/es")["ElSelect"];
|
ElSelect: typeof import("element-plus/es")["ElSelect"];
|
||||||
ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
|
ElSubMenu: typeof import("element-plus/es")["ElSubMenu"];
|
||||||
ElSwitch: typeof import("element-plus/es")["ElSwitch"];
|
ElSwitch: typeof import("element-plus/es")["ElSwitch"];
|
||||||
ElTable: typeof import("element-plus/es")["ElTable"];
|
ElTable: typeof import("element-plus/es")["ElTable"];
|
||||||
ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
|
ElTableColumn: typeof import("element-plus/es")["ElTableColumn"];
|
||||||
ElTabPane: typeof import("element-plus/es")["ElTabPane"];
|
ElTabPane: typeof import("element-plus/es")["ElTabPane"];
|
||||||
ElTabs: typeof import("element-plus/es")["ElTabs"];
|
ElTabs: typeof import("element-plus/es")["ElTabs"];
|
||||||
ElTag: typeof import("element-plus/es")["ElTag"];
|
ElTag: typeof import("element-plus/es")["ElTag"];
|
||||||
ElTooltip: typeof import("element-plus/es")["ElTooltip"];
|
ElTooltip: typeof import("element-plus/es")["ElTooltip"];
|
||||||
ElTree: typeof import("element-plus/es")["ElTree"];
|
ElTree: typeof import("element-plus/es")["ElTree"];
|
||||||
ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
|
ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
|
||||||
ElUpload: typeof import("element-plus/es")["ElUpload"];
|
ElUpload: typeof import("element-plus/es")["ElUpload"];
|
||||||
FixedThead: typeof import("./../views/table/dynamic-table/components/FixedThead.vue")["default"];
|
FixedThead: typeof import("./../views/table/dynamic-table/components/FixedThead.vue")["default"];
|
||||||
FunnelChart: typeof import("./../views/dashboard/components/FunnelChart.vue")["default"];
|
FunnelChart: typeof import("./../views/dashboard/components/FunnelChart.vue")["default"];
|
||||||
GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"];
|
GithubCorner: typeof import("./../components/GithubCorner/index.vue")["default"];
|
||||||
Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
|
Hamburger: typeof import("./../components/Hamburger/index.vue")["default"];
|
||||||
IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
|
IconSelect: typeof import("./../components/IconSelect/index.vue")["default"];
|
||||||
IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
|
IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];
|
||||||
IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
|
IEpCaretBottom: typeof import("~icons/ep/caret-bottom")["default"];
|
||||||
IEpCaretTop: typeof import("~icons/ep/caret-top")["default"];
|
IEpCaretTop: typeof import("~icons/ep/caret-top")["default"];
|
||||||
IEpClose: typeof import("~icons/ep/close")["default"];
|
IEpClose: typeof import("~icons/ep/close")["default"];
|
||||||
IEpCollection: typeof import("~icons/ep/collection")["default"];
|
IEpCollection: typeof import("~icons/ep/collection")["default"];
|
||||||
IEpDelete: typeof import("~icons/ep/delete")["default"];
|
IEpDelete: typeof import("~icons/ep/delete")["default"];
|
||||||
IEpDownload: typeof import("~icons/ep/download")["default"];
|
IEpDownload: typeof import("~icons/ep/download")["default"];
|
||||||
IEpEdit: typeof import("~icons/ep/edit")["default"];
|
IEpEdit: typeof import("~icons/ep/edit")["default"];
|
||||||
IEpPlus: typeof import("~icons/ep/plus")["default"];
|
IEpPlus: typeof import("~icons/ep/plus")["default"];
|
||||||
IEpPosition: typeof import("~icons/ep/position")["default"];
|
IEpPosition: typeof import("~icons/ep/position")["default"];
|
||||||
IEpRefresh: typeof import("~icons/ep/refresh")["default"];
|
IEpRefresh: typeof import("~icons/ep/refresh")["default"];
|
||||||
IEpRefreshLeft: typeof import("~icons/ep/refresh-left")["default"];
|
IEpRefreshLeft: typeof import("~icons/ep/refresh-left")["default"];
|
||||||
IEpSearch: typeof import("~icons/ep/search")["default"];
|
IEpSearch: typeof import("~icons/ep/search")["default"];
|
||||||
IEpSetting: typeof import("~icons/ep/setting")["default"];
|
IEpSetting: typeof import("~icons/ep/setting")["default"];
|
||||||
IEpSortDown: typeof import("~icons/ep/sort-down")["default"];
|
IEpSortDown: typeof import("~icons/ep/sort-down")["default"];
|
||||||
IEpSortUp: typeof import("~icons/ep/sort-up")["default"];
|
IEpSortUp: typeof import("~icons/ep/sort-up")["default"];
|
||||||
IEpTop: typeof import("~icons/ep/top")["default"];
|
IEpTop: typeof import("~icons/ep/top")["default"];
|
||||||
IEpUploadFilled: typeof import("~icons/ep/upload-filled")["default"];
|
IEpUploadFilled: typeof import("~icons/ep/upload-filled")["default"];
|
||||||
LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
|
LangSelect: typeof import("./../components/LangSelect/index.vue")["default"];
|
||||||
Link: typeof import("./../layout/components/Sidebar/Link.vue")["default"];
|
Link: typeof import("./../layout/components/Sidebar/Link.vue")["default"];
|
||||||
Logo: typeof import("./../layout/components/Sidebar/Logo.vue")["default"];
|
Logo: typeof import("./../layout/components/Sidebar/Logo.vue")["default"];
|
||||||
MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"];
|
MultiUpload: typeof import("./../components/Upload/MultiUpload.vue")["default"];
|
||||||
Navbar: typeof import("./../layout/components/Navbar.vue")["default"];
|
Pagination: typeof import("./../components/Pagination/index.vue")["default"];
|
||||||
Pagination: typeof import("./../components/Pagination/index.vue")["default"];
|
PieChart: typeof import("./../views/dashboard/components/PieChart.vue")["default"];
|
||||||
PieChart: typeof import("./../views/dashboard/components/PieChart.vue")["default"];
|
RadarChart: typeof import("./../views/dashboard/components/RadarChart.vue")["default"];
|
||||||
RadarChart: typeof import("./../views/dashboard/components/RadarChart.vue")["default"];
|
RightPanel: typeof import("./../components/RightPanel/index.vue")["default"];
|
||||||
RightPanel: typeof import("./../components/RightPanel/index.vue")["default"];
|
RouterLink: typeof import("vue-router")["RouterLink"];
|
||||||
RouterLink: typeof import("vue-router")["RouterLink"];
|
RouterView: typeof import("vue-router")["RouterView"];
|
||||||
RouterView: typeof import("vue-router")["RouterView"];
|
ScrollPane: typeof import("./../layout/components/TagsView/ScrollPane.vue")["default"];
|
||||||
ScrollPane: typeof import("./../layout/components/TagsView/ScrollPane.vue")["default"];
|
Settings: typeof import("./../layout/components/Settings/index.vue")["default"];
|
||||||
Settings: typeof import("./../layout/components/Settings/index.vue")["default"];
|
Sidebar: typeof import("./../layout/components/Sidebar/index.vue")["default"];
|
||||||
Sidebar: typeof import("./../layout/components/Sidebar/index.vue")["default"];
|
SidebarItem: typeof import("./../layout/components/Sidebar/SidebarItem.vue")["default"];
|
||||||
SidebarItem: typeof import("./../layout/components/Sidebar/SidebarItem.vue")["default"];
|
SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"];
|
||||||
SingleUpload: typeof import("./../components/Upload/SingleUpload.vue")["default"];
|
SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
|
||||||
SizeSelect: typeof import("./../components/SizeSelect/index.vue")["default"];
|
SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
|
||||||
SvgIcon: typeof import("./../components/SvgIcon/index.vue")["default"];
|
SwitchRoles: typeof import("./../views/permission/components/SwitchRoles.vue")["default"];
|
||||||
SwitchRoles: typeof import("./../views/permission/components/SwitchRoles.vue")["default"];
|
TagInput: typeof import("./../components/TagInput/index.vue")["default"];
|
||||||
TagInput: typeof import("./../components/TagInput/index.vue")["default"];
|
TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
|
||||||
TagsView: typeof import("./../layout/components/TagsView/index.vue")["default"];
|
UnfixedThead: typeof import("./../views/table/dynamic-table/components/UnfixedThead.vue")["default"];
|
||||||
UnfixedThead: typeof import("./../views/table/dynamic-table/components/UnfixedThead.vue")["default"];
|
WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
|
||||||
WangEditor: typeof import("./../components/WangEditor/index.vue")["default"];
|
}
|
||||||
}
|
export interface ComponentCustomProperties {
|
||||||
export interface ComponentCustomProperties {
|
vLoading: typeof import("element-plus/es")["ElLoadingDirective"];
|
||||||
vLoading: typeof import("element-plus/es")["ElLoadingDirective"];
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue