Merge 6f59762aff into f70c93715b
Sophea
GitHub
commit
0eab6c0b65
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="collapse-btn" @click="collapseChage">
|
||||
<div class="collapse-btn" @click="collapseChange">
|
||||
<el-icon v-if="sidebar.collapse"><Expand /></el-icon>
|
||||
<el-icon v-else><Fold /></el-icon>
|
||||
</div>
|
||||
|
|
@ -31,11 +31,16 @@
|
|||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
|
||||
<a
|
||||
href="https://github.com/lin-xin/vue-manage-system"
|
||||
target="_blank"
|
||||
>
|
||||
<el-dropdown-item>项目仓库</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||
<el-dropdown-item divided command="loginout"
|
||||
>退出登录</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
|
@ -44,34 +49,42 @@
|
|||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { useSidebarStore } from '../store/sidebar';
|
||||
import { useRouter } from 'vue-router';
|
||||
import imgurl from '../assets/img/img.jpg';
|
||||
import { onMounted } from "vue";
|
||||
import { useSidebarStore } from "../store/sidebar";
|
||||
import { useRouter } from "vue-router";
|
||||
import imgurl from "../assets/img/img.jpg";
|
||||
|
||||
const username: string | null = localStorage.getItem('ms_username');
|
||||
const username: string | null = localStorage.getItem("ms_username");
|
||||
const message: number = 2;
|
||||
|
||||
const sidebar = useSidebarStore();
|
||||
// 侧边栏折叠
|
||||
const collapseChage = () => {
|
||||
const collapseChange = () => {
|
||||
sidebar.handleCollapse();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const onCollapse = () => {
|
||||
if (document.body.clientWidth < 1500) {
|
||||
collapseChage();
|
||||
sidebar.collapse = false;
|
||||
collapseChange();
|
||||
} else {
|
||||
sidebar.collapse = true;
|
||||
collapseChange();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener("resize", onCollapse);
|
||||
});
|
||||
|
||||
// 用户名下拉菜单选择事件
|
||||
const router = useRouter();
|
||||
const handleCommand = (command: string) => {
|
||||
if (command == 'loginout') {
|
||||
localStorage.removeItem('ms_username');
|
||||
router.push('/login');
|
||||
} else if (command == 'user') {
|
||||
router.push('/user');
|
||||
if (command == "loginout") {
|
||||
localStorage.removeItem("ms_username");
|
||||
router.push("/login");
|
||||
} else if (command == "user") {
|
||||
router.push("/user");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,8 +7,12 @@
|
|||
:class="{ active: isActive(item.path) }"
|
||||
:key="index"
|
||||
>
|
||||
<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link>
|
||||
<el-icon @click="closeTags(index)"><Close /></el-icon>
|
||||
<router-link :to="item.path" class="tags-li-title">{{
|
||||
item.title
|
||||
}}</router-link>
|
||||
<el-icon v-if="item.title != '系统首页'" @click="closeTags(index)"
|
||||
><Close
|
||||
/></el-icon>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tags-close-box">
|
||||
|
|
@ -31,8 +35,8 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useTagsStore } from '../store/tags';
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||||
import { useTagsStore } from "../store/tags";
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
|
|
@ -49,43 +53,58 @@ const closeTags = (index: number) => {
|
|||
if (item) {
|
||||
delItem.path === route.fullPath && router.push(item.path);
|
||||
} else {
|
||||
router.push('/');
|
||||
router.push("/");
|
||||
}
|
||||
};
|
||||
|
||||
// 设置标签
|
||||
const setTags = (route: any) => {
|
||||
const isExist = tags.list.some(item => {
|
||||
const isExist = tags.list.some((item) => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
const isDashboard = tags.list.some((item) => item.path === "/dashboard");
|
||||
if (!isExist) {
|
||||
if (tags.list.length >= 8) tags.delTagsItem(0);
|
||||
if (!isDashboard) {
|
||||
if (route.fullPath !== "/dashboard") {
|
||||
tags.setTagsItem({
|
||||
name: "dashboard",
|
||||
title: "系统首页",
|
||||
path: "/dashboard",
|
||||
});
|
||||
}
|
||||
}
|
||||
if (tags.list.length >= 8) tags.delTagsItem(1);
|
||||
tags.setTagsItem({
|
||||
name: route.name,
|
||||
title: route.meta.title,
|
||||
path: route.fullPath
|
||||
path: route.fullPath,
|
||||
});
|
||||
}
|
||||
};
|
||||
setTags(route);
|
||||
onBeforeRouteUpdate(to => {
|
||||
onBeforeRouteUpdate((to) => {
|
||||
setTags(to);
|
||||
});
|
||||
|
||||
// 关闭全部标签
|
||||
const closeAll = () => {
|
||||
tags.clearTags();
|
||||
router.push('/');
|
||||
tags.setTagsItem({
|
||||
name: "dashboard",
|
||||
title: "系统首页",
|
||||
path: "/dashboard",
|
||||
});
|
||||
router.push("/");
|
||||
};
|
||||
// 关闭其他标签
|
||||
const closeOther = () => {
|
||||
const curItem = tags.list.filter(item => {
|
||||
const curItem = tags.list.filter((item) => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
tags.closeTagsOther(curItem);
|
||||
};
|
||||
const handleTags = (command: string) => {
|
||||
command === 'other' ? closeOther() : closeAll();
|
||||
command === "other" ? closeOther() : closeAll();
|
||||
};
|
||||
|
||||
// 关闭当前页面的标签页
|
||||
|
|
|
|||
|
|
@ -1,176 +1,179 @@
|
|||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
||||
import { usePermissStore } from '../store/permiss';
|
||||
import Home from '../views/home.vue';
|
||||
import {
|
||||
createRouter,
|
||||
// createWebHashHistory,
|
||||
RouteRecordRaw,
|
||||
createWebHistory,
|
||||
} from "vue-router";
|
||||
import { usePermissStore } from "../store/permiss";
|
||||
import Home from "../views/home.vue";
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/dashboard',
|
||||
path: "/",
|
||||
redirect: "/dashboard",
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
path: "/dashboard",
|
||||
name: "dashboard",
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
permiss: '1',
|
||||
title: "系统首页",
|
||||
permiss: "1",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "dashboard" */ "../views/dashboard.vue"),
|
||||
},
|
||||
{
|
||||
path: '/table',
|
||||
name: 'basetable',
|
||||
path: "/table",
|
||||
name: "basetable",
|
||||
meta: {
|
||||
title: '表格',
|
||||
permiss: '2',
|
||||
title: "表格",
|
||||
permiss: "2",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "table" */ '../views/table.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "table" */ "../views/table.vue"),
|
||||
},
|
||||
{
|
||||
path: '/charts',
|
||||
name: 'basecharts',
|
||||
path: "/charts",
|
||||
name: "basecharts",
|
||||
meta: {
|
||||
title: '图表',
|
||||
permiss: '11',
|
||||
title: "图表",
|
||||
permiss: "11",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "charts" */ '../views/charts.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "charts" */ "../views/charts.vue"),
|
||||
},
|
||||
{
|
||||
path: '/form',
|
||||
name: 'baseform',
|
||||
path: "/form",
|
||||
name: "baseform",
|
||||
meta: {
|
||||
title: '表单',
|
||||
permiss: '5',
|
||||
title: "表单",
|
||||
permiss: "5",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "form" */ '../views/form.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "form" */ "../views/form.vue"),
|
||||
},
|
||||
{
|
||||
path: '/tabs',
|
||||
name: 'tabs',
|
||||
path: "/tabs",
|
||||
name: "tabs",
|
||||
meta: {
|
||||
title: 'tab标签',
|
||||
permiss: '3',
|
||||
title: "tab标签",
|
||||
permiss: "3",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "tabs" */ '../views/tabs.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "tabs" */ "../views/tabs.vue"),
|
||||
},
|
||||
{
|
||||
path: '/donate',
|
||||
name: 'donate',
|
||||
path: "/donate",
|
||||
name: "donate",
|
||||
meta: {
|
||||
title: '鼓励作者',
|
||||
permiss: '14',
|
||||
title: "鼓励作者",
|
||||
permiss: "14",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "donate" */ '../views/donate.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "donate" */ "../views/donate.vue"),
|
||||
},
|
||||
{
|
||||
path: '/permission',
|
||||
name: 'permission',
|
||||
path: "/permission",
|
||||
name: "permission",
|
||||
meta: {
|
||||
title: '权限管理',
|
||||
permiss: '13',
|
||||
title: "权限管理",
|
||||
permiss: "13",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "permission" */ '../views/permission.vue'),
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "permission" */ "../views/permission.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: '/upload',
|
||||
name: 'upload',
|
||||
path: "/upload",
|
||||
name: "upload",
|
||||
meta: {
|
||||
title: '上传插件',
|
||||
permiss: '6',
|
||||
title: "上传插件",
|
||||
permiss: "6",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "upload" */ '../views/upload.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "upload" */ "../views/upload.vue"),
|
||||
},
|
||||
{
|
||||
path: '/icon',
|
||||
name: 'icon',
|
||||
path: "/icon",
|
||||
name: "icon",
|
||||
meta: {
|
||||
title: '自定义图标',
|
||||
permiss: '10',
|
||||
title: "自定义图标",
|
||||
permiss: "10",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "icon" */ '../views/icon.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "icon" */ "../views/icon.vue"),
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
name: 'user',
|
||||
path: "/user",
|
||||
name: "user",
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
title: "个人中心",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "user" */ '../views/user.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "user" */ "../views/user.vue"),
|
||||
},
|
||||
{
|
||||
path: '/editor',
|
||||
name: 'editor',
|
||||
path: "/editor",
|
||||
name: "editor",
|
||||
meta: {
|
||||
title: '富文本编辑器',
|
||||
permiss: '8',
|
||||
title: "富文本编辑器",
|
||||
permiss: "8",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "editor" */ '../views/editor.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "editor" */ "../views/editor.vue"),
|
||||
},
|
||||
{
|
||||
path: '/markdown',
|
||||
name: 'markdown',
|
||||
path: "/markdown",
|
||||
name: "markdown",
|
||||
meta: {
|
||||
title: 'markdown编辑器',
|
||||
permiss: '9',
|
||||
title: "markdown编辑器",
|
||||
permiss: "9",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "markdown" */ '../views/markdown.vue'),
|
||||
},
|
||||
{
|
||||
path: '/export',
|
||||
name: 'export',
|
||||
meta: {
|
||||
title: '导出Excel',
|
||||
permiss: '2',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "export" */ '../views/export.vue'),
|
||||
},
|
||||
{
|
||||
path: '/import',
|
||||
name: 'import',
|
||||
meta: {
|
||||
title: '导入Excel',
|
||||
permiss: '2',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "import" */ '../views/import.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "markdown" */ "../views/markdown.vue"),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
path: "/login",
|
||||
name: "Login",
|
||||
meta: {
|
||||
title: '登录',
|
||||
title: "登录",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "login" */ '../views/login.vue'),
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "login" */ "../views/login.vue"),
|
||||
},
|
||||
{
|
||||
path: '/403',
|
||||
name: '403',
|
||||
path: "/403",
|
||||
name: "403",
|
||||
meta: {
|
||||
title: '没有权限',
|
||||
title: "没有权限",
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'),
|
||||
component: () => import(/* webpackChunkName: "403" */ "../views/403.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
// history: createWebHashHistory(),
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
document.title = `${to.meta.title} | vue-manage-system`;
|
||||
const role = localStorage.getItem('ms_username');
|
||||
const role = localStorage.getItem("ms_username");
|
||||
const permiss = usePermissStore();
|
||||
if (!role && to.path !== '/login') {
|
||||
next('/login');
|
||||
if (!role && to.path !== "/login") {
|
||||
next("/login");
|
||||
} else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
|
||||
// 如果没有权限，则进入403
|
||||
next('/403');
|
||||
next("/403");
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { defineStore } from 'pinia';
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
interface ListItem {
|
||||
name: string;
|
||||
|
|
@ -6,19 +6,19 @@ interface ListItem {
|
|||
title: string;
|
||||
}
|
||||
|
||||
export const useTagsStore = defineStore('tags', {
|
||||
export const useTagsStore = defineStore("tags", {
|
||||
state: () => {
|
||||
return {
|
||||
list: <ListItem[]>[]
|
||||
list: <ListItem[]>[],
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
show: state => {
|
||||
show: (state) => {
|
||||
return state.list.length > 0;
|
||||
},
|
||||
nameList: state => {
|
||||
return state.list.map(item => item.name);
|
||||
}
|
||||
nameList: (state) => {
|
||||
return state.list.map((item) => item.name);
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
delTagsItem(index: number) {
|
||||
|
|
@ -32,6 +32,14 @@ export const useTagsStore = defineStore('tags', {
|
|||
},
|
||||
closeTagsOther(data: ListItem[]) {
|
||||
this.list = data;
|
||||
const isExist = data.find((ele) => ele.path === "/dashboard");
|
||||
if (!isExist) {
|
||||
this.list.unshift({
|
||||
name: "dashboard",
|
||||
title: "系统首页",
|
||||
path: "/dashboard",
|
||||
});
|
||||
}
|
||||
},
|
||||
closeCurrentTag(data: any) {
|
||||
for (let i = 0, len = this.list.length; i < len; i++) {
|
||||
|
|
@ -42,12 +50,12 @@ export const useTagsStore = defineStore('tags', {
|
|||
} else if (i > 0) {
|
||||
data.$router.push(this.list[i - 1].path);
|
||||
} else {
|
||||
data.$router.push('/');
|
||||
data.$router.push("/");
|
||||
}
|
||||
this.list.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue