github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge 6f59762aff into f70c93715b

pull/352/merge
Sophea 2023-06-23 15:20:24 +07:00 committed by GitHub
parent f70c93715b 6f59762aff
commit 0eab6c0b65
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 2346 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1885
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

227
src/components/header.vue
View File

@ -1,154 +1,167 @@
<template> <template>
<div class="header"> <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-if="sidebar.collapse"><Expand /></el-icon>
<el-icon v-else><Fold /></el-icon> <el-icon v-else><Fold /></el-icon>
</div> </div>
<div class="logo">后台管理系统</div> <div class="logo">后台管理系统</div>
<div class="header-right"> <div class="header-right">
<div class="header-user-con"> <div class="header-user-con">
<!-- 消息中心 --> <!-- 消息中心 -->
<div class="btn-bell" @click="router.push('/tabs')"> <div class="btn-bell" @click="router.push('/tabs')">
<el-tooltip <el-tooltip
effect="dark" effect="dark"
:content="message ? `有${message}条未读消息` : `消息中心`" :content="message ? `有${message}条未读消息` : `消息中心`"
placement="bottom" placement="bottom"
> >
<i class="el-icon-lx-notice"></i> <i class="el-icon-lx-notice"></i>
</el-tooltip> </el-tooltip>
<span class="btn-bell-badge" v-if="message"></span> <span class="btn-bell-badge" v-if="message"></span>
</div> </div>
<!-- 用户头像 --> <!-- 用户头像 -->
<el-avatar class="user-avator" :size="30" :src="imgurl" /> <el-avatar class="user-avator" :size="30" :src="imgurl" />
<!-- 用户名下拉菜单 --> <!-- 用户名下拉菜单 -->
<el-dropdown class="user-name" trigger="click" @command="handleCommand"> <el-dropdown class="user-name" trigger="click" @command="handleCommand">
<span class="el-dropdown-link"> <span class="el-dropdown-link">
{{ username }} {{ username }}
<el-icon class="el-icon--right"> <el-icon class="el-icon--right">
<arrow-down /> <arrow-down />
</el-icon> </el-icon>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank"> <a
<el-dropdown-item>项目仓库</el-dropdown-item> href="https://github.com/lin-xin/vue-manage-system"
</a> target="_blank"
<el-dropdown-item command="user">个人中心</el-dropdown-item> >
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item> <el-dropdown-item>项目仓库</el-dropdown-item>
</el-dropdown-menu> </a>
</template> <el-dropdown-item command="user">个人中心</el-dropdown-item>
</el-dropdown> <el-dropdown-item divided command="loginout"
</div> >退出登录</el-dropdown-item
</div> >
</div> </el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted } from 'vue'; import { onMounted } from "vue";
import { useSidebarStore } from '../store/sidebar'; import { useSidebarStore } from "../store/sidebar";
import { useRouter } from 'vue-router'; import { useRouter } from "vue-router";
import imgurl from '../assets/img/img.jpg'; 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 message: number = 2;
const sidebar = useSidebarStore(); const sidebar = useSidebarStore();
// 侧边栏折叠 // 侧边栏折叠
const collapseChage = () => { const collapseChange = () => {
sidebar.handleCollapse(); sidebar.handleCollapse();
};
const onCollapse = () => {
if (document.body.clientWidth < 1500) {
sidebar.collapse = false;
collapseChange();
} else {
sidebar.collapse = true;
collapseChange();
}
}; };
onMounted(() => { onMounted(() => {
if (document.body.clientWidth < 1500) { window.addEventListener("resize", onCollapse);
collapseChage();
}
}); });
// 用户名下拉菜单选择事件 // 用户名下拉菜单选择事件
const router = useRouter(); const router = useRouter();
const handleCommand = (command: string) => { const handleCommand = (command: string) => {
if (command == 'loginout') { if (command == "loginout") {
localStorage.removeItem('ms_username'); localStorage.removeItem("ms_username");
router.push('/login'); router.push("/login");
} else if (command == 'user') { } else if (command == "user") {
router.push('/user'); router.push("/user");
} }
}; };
</script> </script>
<style scoped> <style scoped>
.header { .header {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 70px; height: 70px;
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
} }
.collapse-btn { .collapse-btn {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 100%; height: 100%;
float: left; float: left;
padding: 0 21px; padding: 0 21px;
cursor: pointer; cursor: pointer;
} }
.header .logo { .header .logo {
float: left; float: left;
width: 250px; width: 250px;
line-height: 70px; line-height: 70px;
} }
.header-right { .header-right {
float: right; float: right;
padding-right: 50px; padding-right: 50px;
} }
.header-user-con { .header-user-con {
display: flex; display: flex;
height: 70px; height: 70px;
align-items: center; align-items: center;
} }
.btn-fullscreen { .btn-fullscreen {
transform: rotate(45deg); transform: rotate(45deg);
margin-right: 5px; margin-right: 5px;
font-size: 24px; font-size: 24px;
} }
.btn-bell, .btn-bell,
.btn-fullscreen { .btn-fullscreen {
position: relative; position: relative;
width: 30px; width: 30px;
height: 30px; height: 30px;
text-align: center; text-align: center;
border-radius: 15px; border-radius: 15px;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.btn-bell-badge { .btn-bell-badge {
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 0px; top: 0px;
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 4px; border-radius: 4px;
background: #f56c6c; background: #f56c6c;
color: #fff; color: #fff;
} }
.btn-bell .el-icon-lx-notice { .btn-bell .el-icon-lx-notice {
color: #fff; color: #fff;
} }
.user-name { .user-name {
margin-left: 10px; margin-left: 10px;
} }
.user-avator { .user-avator {
margin-left: 20px; margin-left: 20px;
} }
.el-dropdown-link { .el-dropdown-link {
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.el-dropdown-menu__item { .el-dropdown-menu__item {
text-align: center; text-align: center;
} }
</style> </style>

231
src/components/tags.vue
View File

@ -1,91 +1,110 @@
<template> <template>
<div class="tags" v-if="tags.show"> <div class="tags" v-if="tags.show">
<ul> <ul>
<li <li
class="tags-li" class="tags-li"
v-for="(item, index) in tags.list" v-for="(item, index) in tags.list"
:class="{ active: isActive(item.path) }" :class="{ active: isActive(item.path) }"
:key="index" :key="index"
> >
<router-link :to="item.path" class="tags-li-title">{{ item.title }}</router-link> <router-link :to="item.path" class="tags-li-title">{{
<el-icon @click="closeTags(index)"><Close /></el-icon> item.title
</li> }}</router-link>
</ul> <el-icon v-if="item.title != '系统首页'" @click="closeTags(index)"
<div class="tags-close-box"> ><Close
<el-dropdown @command="handleTags"> /></el-icon>
<el-button size="small" type="primary"> </li>
标签选项 </ul>
<el-icon class="el-icon--right"> <div class="tags-close-box">
<arrow-down /> <el-dropdown @command="handleTags">
</el-icon> <el-button size="small" type="primary">
</el-button> 标签选项
<template #dropdown> <el-icon class="el-icon--right">
<el-dropdown-menu size="small"> <arrow-down />
<el-dropdown-item command="other">关闭其他</el-dropdown-item> </el-icon>
<el-dropdown-item command="all">关闭所有</el-dropdown-item> </el-button>
</el-dropdown-menu> <template #dropdown>
</template> <el-dropdown-menu size="small">
</el-dropdown> <el-dropdown-item command="other">关闭其他</el-dropdown-item>
</div> <el-dropdown-item command="all">关闭所有</el-dropdown-item>
</div> </el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useTagsStore } from '../store/tags'; import { useTagsStore } from "../store/tags";
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'; import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const isActive = (path: string) => { const isActive = (path: string) => {
return path === route.fullPath; return path === route.fullPath;
}; };
const tags = useTagsStore(); const tags = useTagsStore();
// 关闭单个标签 // 关闭单个标签
const closeTags = (index: number) => { const closeTags = (index: number) => {
const delItem = tags.list[index]; const delItem = tags.list[index];
tags.delTagsItem(index); tags.delTagsItem(index);
const item = tags.list[index] ? tags.list[index] : tags.list[index - 1]; const item = tags.list[index] ? tags.list[index] : tags.list[index - 1];
if (item) { if (item) {
delItem.path === route.fullPath && router.push(item.path); delItem.path === route.fullPath && router.push(item.path);
} else { } else {
router.push('/'); router.push("/");
} }
}; };
// 设置标签 // 设置标签
const setTags = (route: any) => { const setTags = (route: any) => {
const isExist = tags.list.some(item => { const isExist = tags.list.some((item) => {
return item.path === route.fullPath; return item.path === route.fullPath;
}); });
if (!isExist) { const isDashboard = tags.list.some((item) => item.path === "/dashboard");
if (tags.list.length >= 8) tags.delTagsItem(0); if (!isExist) {
tags.setTagsItem({ if (!isDashboard) {
name: route.name, if (route.fullPath !== "/dashboard") {
title: route.meta.title, tags.setTagsItem({
path: route.fullPath 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,
});
}
}; };
setTags(route); setTags(route);
onBeforeRouteUpdate(to => { onBeforeRouteUpdate((to) => {
setTags(to); setTags(to);
}); });
// 关闭全部标签 // 关闭全部标签
const closeAll = () => { const closeAll = () => {
tags.clearTags(); tags.clearTags();
router.push('/'); tags.setTagsItem({
name: "dashboard",
title: "系统首页",
path: "/dashboard",
});
router.push("/");
}; };
// 关闭其他标签 // 关闭其他标签
const closeOther = () => { const closeOther = () => {
const curItem = tags.list.filter(item => { const curItem = tags.list.filter((item) => {
return item.path === route.fullPath; return item.path === route.fullPath;
}); });
tags.closeTagsOther(curItem); tags.closeTagsOther(curItem);
}; };
const handleTags = (command: string) => { const handleTags = (command: string) => {
command === 'other' ? closeOther() : closeAll(); command === "other" ? closeOther() : closeAll();
}; };
// 关闭当前页面的标签页 // 关闭当前页面的标签页
@ -97,72 +116,72 @@ const handleTags = (command: string) => {
<style> <style>
.tags { .tags {
position: relative; position: relative;
height: 30px; height: 30px;
overflow: hidden; overflow: hidden;
background: #fff; background: #fff;
padding-right: 120px; padding-right: 120px;
box-shadow: 0 5px 10px #ddd; box-shadow: 0 5px 10px #ddd;
} }
.tags ul { .tags ul {
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.tags-li { .tags-li {
display: flex; display: flex;
align-items: center; align-items: center;
float: left; float: left;
margin: 3px 5px 2px 3px; margin: 3px 5px 2px 3px;
border-radius: 3px; border-radius: 3px;
font-size: 12px; font-size: 12px;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
height: 23px; height: 23px;
border: 1px solid #e9eaec; border: 1px solid #e9eaec;
background: #fff; background: #fff;
padding: 0 5px 0 12px; padding: 0 5px 0 12px;
color: #666; color: #666;
-webkit-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in; transition: all 0.3s ease-in;
} }
.tags-li:not(.active):hover { .tags-li:not(.active):hover {
background: #f8f8f8; background: #f8f8f8;
} }
.tags-li.active { .tags-li.active {
color: #fff; color: #fff;
} }
.tags-li-title { .tags-li-title {
float: left; float: left;
max-width: 80px; max-width: 80px;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 5px; margin-right: 5px;
color: #666; color: #666;
} }
.tags-li.active .tags-li-title { .tags-li.active .tags-li-title {
color: #fff; color: #fff;
} }
.tags-close-box { .tags-close-box {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
box-sizing: border-box; box-sizing: border-box;
padding-top: 1px; padding-top: 1px;
text-align: center; text-align: center;
width: 110px; width: 110px;
height: 30px; height: 30px;
background: #fff; background: #fff;
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1); box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
z-index: 10; z-index: 10;
} }
</style> </style>

329
src/router/index.ts
View File

@ -1,179 +1,182 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'; import {
import { usePermissStore } from '../store/permiss'; createRouter,
import Home from '../views/home.vue'; // createWebHashHistory,
RouteRecordRaw,
createWebHistory,
} from "vue-router";
import { usePermissStore } from "../store/permiss";
import Home from "../views/home.vue";
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
{ {
path: '/', path: "/",
redirect: '/dashboard', redirect: "/dashboard",
}, },
{ {
path: '/', path: "/",
name: 'Home', name: "Home",
component: Home, component: Home,
children: [ children: [
{ {
path: '/dashboard', path: "/dashboard",
name: 'dashboard', name: "dashboard",
meta: {
title: '系统首页',
permiss: '1',
},
component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'),
},
{
path: '/table',
name: 'basetable',
meta: {
title: '表格',
permiss: '2',
},
component: () => import(/* webpackChunkName: "table" */ '../views/table.vue'),
},
{
path: '/charts',
name: 'basecharts',
meta: {
title: '图表',
permiss: '11',
},
component: () => import(/* webpackChunkName: "charts" */ '../views/charts.vue'),
},
{
path: '/form',
name: 'baseform',
meta: {
title: '表单',
permiss: '5',
},
component: () => import(/* webpackChunkName: "form" */ '../views/form.vue'),
},
{
path: '/tabs',
name: 'tabs',
meta: {
title: 'tab标签',
permiss: '3',
},
component: () => import(/* webpackChunkName: "tabs" */ '../views/tabs.vue'),
},
{
path: '/donate',
name: 'donate',
meta: {
title: '鼓励作者',
permiss: '14',
},
component: () => import(/* webpackChunkName: "donate" */ '../views/donate.vue'),
},
{
path: '/permission',
name: 'permission',
meta: {
title: '权限管理',
permiss: '13',
},
component: () => import(/* webpackChunkName: "permission" */ '../views/permission.vue'),
},
{
path: '/upload',
name: 'upload',
meta: {
title: '上传插件',
permiss: '6',
},
component: () => import(/* webpackChunkName: "upload" */ '../views/upload.vue'),
},
{
path: '/icon',
name: 'icon',
meta: {
title: '自定义图标',
permiss: '10',
},
component: () => import(/* webpackChunkName: "icon" */ '../views/icon.vue'),
},
{
path: '/user',
name: 'user',
meta: {
title: '个人中心',
},
component: () => import(/* webpackChunkName: "user" */ '../views/user.vue'),
},
{
path: '/editor',
name: 'editor',
meta: {
title: '富文本编辑器',
permiss: '8',
},
component: () => import(/* webpackChunkName: "editor" */ '../views/editor.vue'),
},
{
path: '/markdown',
name: 'markdown',
meta: {
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'),
},
],
},
{
path: '/login',
name: 'Login',
meta: { meta: {
title: '登录', title: "系统首页",
permiss: "1",
}, },
component: () => import(/* webpackChunkName: "login" */ '../views/login.vue'), component: () =>
}, import(/* webpackChunkName: "dashboard" */ "../views/dashboard.vue"),
{ },
path: '/403', {
name: '403', path: "/table",
name: "basetable",
meta: { meta: {
title: '没有权限', title: "表格",
permiss: "2",
}, },
component: () => import(/* webpackChunkName: "403" */ '../views/403.vue'), component: () =>
import(/* webpackChunkName: "table" */ "../views/table.vue"),
},
{
path: "/charts",
name: "basecharts",
meta: {
title: "图表",
permiss: "11",
},
component: () =>
import(/* webpackChunkName: "charts" */ "../views/charts.vue"),
},
{
path: "/form",
name: "baseform",
meta: {
title: "表单",
permiss: "5",
},
component: () =>
import(/* webpackChunkName: "form" */ "../views/form.vue"),
},
{
path: "/tabs",
name: "tabs",
meta: {
title: "tab标签",
permiss: "3",
},
component: () =>
import(/* webpackChunkName: "tabs" */ "../views/tabs.vue"),
},
{
path: "/donate",
name: "donate",
meta: {
title: "鼓励作者",
permiss: "14",
},
component: () =>
import(/* webpackChunkName: "donate" */ "../views/donate.vue"),
},
{
path: "/permission",
name: "permission",
meta: {
title: "权限管理",
permiss: "13",
},
component: () =>
import(
/* webpackChunkName: "permission" */ "../views/permission.vue"
),
},
{
path: "/upload",
name: "upload",
meta: {
title: "上传插件",
permiss: "6",
},
component: () =>
import(/* webpackChunkName: "upload" */ "../views/upload.vue"),
},
{
path: "/icon",
name: "icon",
meta: {
title: "自定义图标",
permiss: "10",
},
component: () =>
import(/* webpackChunkName: "icon" */ "../views/icon.vue"),
},
{
path: "/user",
name: "user",
meta: {
title: "个人中心",
},
component: () =>
import(/* webpackChunkName: "user" */ "../views/user.vue"),
},
{
path: "/editor",
name: "editor",
meta: {
title: "富文本编辑器",
permiss: "8",
},
component: () =>
import(/* webpackChunkName: "editor" */ "../views/editor.vue"),
},
{
path: "/markdown",
name: "markdown",
meta: {
title: "markdown编辑器",
permiss: "9",
},
component: () =>
import(/* webpackChunkName: "markdown" */ "../views/markdown.vue"),
},
],
},
{
path: "/login",
name: "Login",
meta: {
title: "登录",
}, },
component: () =>
import(/* webpackChunkName: "login" */ "../views/login.vue"),
},
{
path: "/403",
name: "403",
meta: {
title: "没有权限",
},
component: () => import(/* webpackChunkName: "403" */ "../views/403.vue"),
},
]; ];
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), // history: createWebHashHistory(),
routes, history: createWebHistory(),
routes,
}); });
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | vue-manage-system`; document.title = `${to.meta.title} | vue-manage-system`;
const role = localStorage.getItem('ms_username'); const role = localStorage.getItem("ms_username");
const permiss = usePermissStore(); const permiss = usePermissStore();
if (!role && to.path !== '/login') { if (!role && to.path !== "/login") {
next('/login'); next("/login");
} else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) { } else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
// 如果没有权限，则进入403 // 如果没有权限，则进入403
next('/403'); next("/403");
} else { } else {
next(); next();
} }
}); });
export default router; export default router;

104
src/store/tags.ts
View File

@ -1,53 +1,61 @@
import { defineStore } from 'pinia'; import { defineStore } from "pinia";
interface ListItem { interface ListItem {
name: string; name: string;
path: string; path: string;
title: string; title: string;
} }
export const useTagsStore = defineStore('tags', { export const useTagsStore = defineStore("tags", {
state: () => { state: () => {
return { return {
list: <ListItem[]>[] list: <ListItem[]>[],
}; };
}, },
getters: { getters: {
show: state => { show: (state) => {
return state.list.length > 0; return state.list.length > 0;
}, },
nameList: state => { nameList: (state) => {
return state.list.map(item => item.name); return state.list.map((item) => item.name);
} },
}, },
actions: { actions: {
delTagsItem(index: number) { delTagsItem(index: number) {
this.list.splice(index, 1); this.list.splice(index, 1);
}, },
setTagsItem(data: ListItem) { setTagsItem(data: ListItem) {
this.list.push(data); this.list.push(data);
}, },
clearTags() { clearTags() {
this.list = []; this.list = [];
}, },
closeTagsOther(data: ListItem[]) { closeTagsOther(data: ListItem[]) {
this.list = data; this.list = data;
}, const isExist = data.find((ele) => ele.path === "/dashboard");
closeCurrentTag(data: any) { if (!isExist) {
for (let i = 0, len = this.list.length; i < len; i++) { this.list.unshift({
const item = this.list[i]; name: "dashboard",
if (item.path === data.$route.fullPath) { title: "系统首页",
if (i < len - 1) { path: "/dashboard",
data.$router.push(this.list[i + 1].path); });
} else if (i > 0) { }
data.$router.push(this.list[i - 1].path); },
} else { closeCurrentTag(data: any) {
data.$router.push('/'); for (let i = 0, len = this.list.length; i < len; i++) {
} const item = this.list[i];
this.list.splice(i, 1); if (item.path === data.$route.fullPath) {
break; if (i < len - 1) {
} data.$router.push(this.list[i + 1].path);
} } else if (i > 0) {
} data.$router.push(this.list[i - 1].path);
} } else {
data.$router.push("/");
}
this.list.splice(i, 1);
break;
}
}
},
},
}); });