fix:文件名改为小写
lin-xin
parent
995ab69b1e
commit
9237de9b89
|
|
@ -1,154 +1,154 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<!-- 折叠按钮 -->
|
<!-- 折叠按钮 -->
|
||||||
<div class="collapse-btn" @click="collapseChage">
|
<div class="collapse-btn" @click="collapseChage">
|
||||||
<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 href="https://github.com/lin-xin/vue-manage-system" target="_blank">
|
||||||
<el-dropdown-item>项目仓库</el-dropdown-item>
|
<el-dropdown-item>项目仓库</el-dropdown-item>
|
||||||
</a>
|
</a>
|
||||||
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
<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>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 collapseChage = () => {
|
||||||
sidebar.handleCollapse();
|
sidebar.handleCollapse();
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (document.body.clientWidth < 1500) {
|
if (document.body.clientWidth < 1500) {
|
||||||
collapseChage();
|
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>
|
||||||
|
|
@ -1,164 +1,164 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<el-menu
|
<el-menu
|
||||||
class="sidebar-el-menu"
|
class="sidebar-el-menu"
|
||||||
:default-active="onRoutes"
|
:default-active="onRoutes"
|
||||||
:collapse="sidebar.collapse"
|
:collapse="sidebar.collapse"
|
||||||
background-color="#324157"
|
background-color="#324157"
|
||||||
text-color="#bfcbd9"
|
text-color="#bfcbd9"
|
||||||
active-text-color="#20a0ff"
|
active-text-color="#20a0ff"
|
||||||
unique-opened
|
unique-opened
|
||||||
router
|
router
|
||||||
>
|
>
|
||||||
<template v-for="item in items">
|
<template v-for="item in items">
|
||||||
<template v-if="item.subs">
|
<template v-if="item.subs">
|
||||||
<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
|
<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
|
||||||
<template #title>
|
<template #title>
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<component :is="item.icon"></component>
|
<component :is="item.icon"></component>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<span>{{ item.title }}</span>
|
<span>{{ item.title }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template v-for="subItem in item.subs">
|
<template v-for="subItem in item.subs">
|
||||||
<el-sub-menu
|
<el-sub-menu
|
||||||
v-if="subItem.subs"
|
v-if="subItem.subs"
|
||||||
:index="subItem.index"
|
:index="subItem.index"
|
||||||
:key="subItem.index"
|
:key="subItem.index"
|
||||||
v-permiss="item.permiss"
|
v-permiss="item.permiss"
|
||||||
>
|
>
|
||||||
<template #title>{{ subItem.title }}</template>
|
<template #title>{{ subItem.title }}</template>
|
||||||
<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
|
<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
|
||||||
{{ threeItem.title }}
|
{{ threeItem.title }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
|
<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
|
||||||
{{ subItem.title }}
|
{{ subItem.title }}
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
</el-sub-menu>
|
</el-sub-menu>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
|
<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<component :is="item.icon"></component>
|
<component :is="item.icon"></component>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
<template #title>{{ item.title }}</template>
|
<template #title>{{ item.title }}</template>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useSidebarStore } from '../store/sidebar';
|
import { useSidebarStore } from '../store/sidebar';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{
|
{
|
||||||
icon: 'Odometer',
|
icon: 'Odometer',
|
||||||
index: '/dashboard',
|
index: '/dashboard',
|
||||||
title: '系统首页',
|
title: '系统首页',
|
||||||
permiss: '1'
|
permiss: '1'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'Calendar',
|
icon: 'Calendar',
|
||||||
index: '/table',
|
index: '/table',
|
||||||
title: '基础表格',
|
title: '基础表格',
|
||||||
permiss: '2'
|
permiss: '2'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'DocumentCopy',
|
icon: 'DocumentCopy',
|
||||||
index: '/tabs',
|
index: '/tabs',
|
||||||
title: 'tab选项卡',
|
title: 'tab选项卡',
|
||||||
permiss: '3'
|
permiss: '3'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'Edit',
|
icon: 'Edit',
|
||||||
index: '3',
|
index: '3',
|
||||||
title: '表单相关',
|
title: '表单相关',
|
||||||
permiss: '4',
|
permiss: '4',
|
||||||
subs: [
|
subs: [
|
||||||
{
|
{
|
||||||
index: '/form',
|
index: '/form',
|
||||||
title: '基本表单',
|
title: '基本表单',
|
||||||
permiss: '5'
|
permiss: '5'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: '/upload',
|
index: '/upload',
|
||||||
title: '文件上传',
|
title: '文件上传',
|
||||||
permiss: '6'
|
permiss: '6'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: '4',
|
index: '4',
|
||||||
title: '三级菜单',
|
title: '三级菜单',
|
||||||
permiss: '7',
|
permiss: '7',
|
||||||
subs: [
|
subs: [
|
||||||
{
|
{
|
||||||
index: '/editor',
|
index: '/editor',
|
||||||
title: '富文本编辑器',
|
title: '富文本编辑器',
|
||||||
permiss: '8'
|
permiss: '8'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: '/markdown',
|
index: '/markdown',
|
||||||
title: 'markdown编辑器',
|
title: 'markdown编辑器',
|
||||||
permiss: '9'
|
permiss: '9'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'Setting',
|
icon: 'Setting',
|
||||||
index: '/icon',
|
index: '/icon',
|
||||||
title: '自定义图标',
|
title: '自定义图标',
|
||||||
permiss: '10'
|
permiss: '10'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'PieChart',
|
icon: 'PieChart',
|
||||||
index: '/charts',
|
index: '/charts',
|
||||||
title: 'schart图表',
|
title: 'schart图表',
|
||||||
permiss: '11'
|
permiss: '11'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'Warning',
|
icon: 'Warning',
|
||||||
index: '/permission',
|
index: '/permission',
|
||||||
title: '权限管理',
|
title: '权限管理',
|
||||||
permiss: '13'
|
permiss: '13'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: 'CoffeeCup',
|
icon: 'CoffeeCup',
|
||||||
index: '/donate',
|
index: '/donate',
|
||||||
title: '支持作者',
|
title: '支持作者',
|
||||||
permiss: '14'
|
permiss: '14'
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const onRoutes = computed(() => {
|
const onRoutes = computed(() => {
|
||||||
return route.path;
|
return route.path;
|
||||||
});
|
});
|
||||||
|
|
||||||
const sidebar = useSidebarStore();
|
const sidebar = useSidebarStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.sidebar {
|
.sidebar {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
.sidebar::-webkit-scrollbar {
|
.sidebar::-webkit-scrollbar {
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
.sidebar-el-menu:not(.el-menu--collapse) {
|
.sidebar-el-menu:not(.el-menu--collapse) {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
}
|
}
|
||||||
.sidebar > ul {
|
.sidebar > ul {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,168 +1,168 @@
|
||||||
<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">{{ item.title }}</router-link>
|
||||||
<el-icon @click="closeTags(index)"><Close /></el-icon>
|
<el-icon @click="closeTags(index)"><Close /></el-icon>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="tags-close-box">
|
<div class="tags-close-box">
|
||||||
<el-dropdown @command="handleTags">
|
<el-dropdown @command="handleTags">
|
||||||
<el-button size="small" type="primary">
|
<el-button size="small" type="primary">
|
||||||
标签选项
|
标签选项
|
||||||
<el-icon class="el-icon--right">
|
<el-icon class="el-icon--right">
|
||||||
<arrow-down />
|
<arrow-down />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</el-button>
|
</el-button>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu size="small">
|
<el-dropdown-menu size="small">
|
||||||
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
||||||
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</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) {
|
if (!isExist) {
|
||||||
if (tags.list.length >= 8) tags.delTagsItem(0);
|
if (tags.list.length >= 8) tags.delTagsItem(0);
|
||||||
tags.setTagsItem({
|
tags.setTagsItem({
|
||||||
name: route.name,
|
name: route.name,
|
||||||
title: route.meta.title,
|
title: route.meta.title,
|
||||||
path: route.fullPath
|
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('/');
|
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();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 关闭当前页面的标签页
|
// 关闭当前页面的标签页
|
||||||
// tags.closeCurrentTag({
|
// tags.closeCurrentTag({
|
||||||
// $router: router,
|
// $router: router,
|
||||||
// $route: route
|
// $route: route
|
||||||
// });
|
// });
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<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>
|
||||||
|
|
@ -1,26 +1,26 @@
|
||||||
<template>
|
<template>
|
||||||
<v-header />
|
<v-header />
|
||||||
<v-sidebar />
|
<v-sidebar />
|
||||||
<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
|
<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
|
||||||
<v-tags></v-tags>
|
<v-tags></v-tags>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition name="move" mode="out-in">
|
<transition name="move" mode="out-in">
|
||||||
<keep-alive :include="tags.nameList">
|
<keep-alive :include="tags.nameList">
|
||||||
<component :is="Component"></component>
|
<component :is="Component"></component>
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useSidebarStore } from '../store/sidebar';
|
import { useSidebarStore } from '../store/sidebar';
|
||||||
import { useTagsStore } from '../store/tags';
|
import { useTagsStore } from '../store/tags';
|
||||||
import vHeader from '../components/header.vue';
|
import vHeader from '../components/header.vue';
|
||||||
import vSidebar from '../components/sidebar.vue';
|
import vSidebar from '../components/sidebar.vue';
|
||||||
import vTags from '../components/tags.vue';
|
import vTags from '../components/tags.vue';
|
||||||
|
|
||||||
const sidebar = useSidebarStore();
|
const sidebar = useSidebarStore();
|
||||||
const tags = useTagsStore();
|
const tags = useTagsStore();
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -1,129 +1,129 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="login-wrap">
|
<div class="login-wrap">
|
||||||
<div class="ms-login">
|
<div class="ms-login">
|
||||||
<div class="ms-title">后台管理系统</div>
|
<div class="ms-title">后台管理系统</div>
|
||||||
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
|
<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input v-model="param.username" placeholder="username">
|
<el-input v-model="param.username" placeholder="username">
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<el-button :icon="User"></el-button>
|
<el-button :icon="User"></el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="password">
|
<el-form-item prop="password">
|
||||||
<el-input
|
<el-input
|
||||||
type="password"
|
type="password"
|
||||||
placeholder="password"
|
placeholder="password"
|
||||||
v-model="param.password"
|
v-model="param.password"
|
||||||
@keyup.enter="submitForm(login)"
|
@keyup.enter="submitForm(login)"
|
||||||
>
|
>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<el-button :icon="Lock"></el-button>
|
<el-button :icon="Lock"></el-button>
|
||||||
</template>
|
</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div class="login-btn">
|
<div class="login-btn">
|
||||||
<el-button type="primary" @click="submitForm(login)">登录</el-button>
|
<el-button type="primary" @click="submitForm(login)">登录</el-button>
|
||||||
</div>
|
</div>
|
||||||
<p class="login-tips">Tips : 用户名和密码随便填。</p>
|
<p class="login-tips">Tips : 用户名和密码随便填。</p>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, reactive } from 'vue';
|
import { ref, reactive } from 'vue';
|
||||||
import { useTagsStore } from '../store/tags';
|
import { useTagsStore } from '../store/tags';
|
||||||
import { usePermissStore } from '../store/permiss';
|
import { usePermissStore } from '../store/permiss';
|
||||||
import { useRouter } from 'vue-router';
|
import { useRouter } from 'vue-router';
|
||||||
import { ElMessage } from 'element-plus';
|
import { ElMessage } from 'element-plus';
|
||||||
import type { FormInstance, FormRules } from 'element-plus';
|
import type { FormInstance, FormRules } from 'element-plus';
|
||||||
import { Lock, User } from '@element-plus/icons-vue';
|
import { Lock, User } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
interface LoginInfo {
|
interface LoginInfo {
|
||||||
username: string;
|
username: string;
|
||||||
password: string;
|
password: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const param = reactive<LoginInfo>({
|
const param = reactive<LoginInfo>({
|
||||||
username: 'admin',
|
username: 'admin',
|
||||||
password: '123123'
|
password: '123123'
|
||||||
});
|
});
|
||||||
|
|
||||||
const rules: FormRules = {
|
const rules: FormRules = {
|
||||||
username: [
|
username: [
|
||||||
{
|
{
|
||||||
required: true,
|
required: true,
|
||||||
message: '请输入用户名',
|
message: '请输入用户名',
|
||||||
trigger: 'blur'
|
trigger: 'blur'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
||||||
};
|
};
|
||||||
const permiss = usePermissStore();
|
const permiss = usePermissStore();
|
||||||
const login = ref<FormInstance>();
|
const login = ref<FormInstance>();
|
||||||
const submitForm = (formEl: FormInstance | undefined) => {
|
const submitForm = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
formEl.validate((valid: boolean) => {
|
formEl.validate((valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
ElMessage.success('登录成功');
|
ElMessage.success('登录成功');
|
||||||
localStorage.setItem('ms_username', param.username);
|
localStorage.setItem('ms_username', param.username);
|
||||||
const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
|
const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
|
||||||
permiss.handleSet(keys);
|
permiss.handleSet(keys);
|
||||||
localStorage.setItem('ms_keys', JSON.stringify(keys));
|
localStorage.setItem('ms_keys', JSON.stringify(keys));
|
||||||
router.push('/');
|
router.push('/');
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error('登录成功');
|
ElMessage.error('登录成功');
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const tags = useTagsStore();
|
const tags = useTagsStore();
|
||||||
tags.clearTags();
|
tags.clearTags();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.login-wrap {
|
.login-wrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-image: url(../assets/img/login-bg.jpg);
|
background-image: url(../assets/img/login-bg.jpg);
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}
|
||||||
.ms-title {
|
.ms-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
.ms-login {
|
.ms-login {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
width: 350px;
|
width: 350px;
|
||||||
margin: -190px 0 0 -175px;
|
margin: -190px 0 0 -175px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background: rgba(255, 255, 255, 0.3);
|
background: rgba(255, 255, 255, 0.3);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.ms-content {
|
.ms-content {
|
||||||
padding: 30px 30px;
|
padding: 30px 30px;
|
||||||
}
|
}
|
||||||
.login-btn {
|
.login-btn {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.login-btn button {
|
.login-btn button {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.login-tips {
|
.login-tips {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -1,21 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="plugins-tips">
|
<div class="plugins-tips">
|
||||||
md-editor-v3：vue3版本的 markdown 编辑器，配置丰富，请详看文档。 访问地址：
|
md-editor-v3：vue3版本的 markdown 编辑器，配置丰富，请详看文档。 访问地址：
|
||||||
<a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
|
<a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
|
||||||
</div>
|
</div>
|
||||||
<md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg" />
|
<md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg" />
|
||||||
<el-button type="primary">提交</el-button>
|
<el-button type="primary">提交</el-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name="md">
|
<script setup lang="ts" name="md">
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import MdEditor from 'md-editor-v3';
|
import MdEditor from 'md-editor-v3';
|
||||||
import 'md-editor-v3/lib/style.css';
|
import 'md-editor-v3/lib/style.css';
|
||||||
|
|
||||||
const text = ref('Hello Editor!');
|
const text = ref('Hello Editor!');
|
||||||
const onUploadImg = (files: any) => {
|
const onUploadImg = (files: any) => {
|
||||||
console.log(files);
|
console.log(files);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
Element Plus自带上传组件。 访问地址：
|
Element Plus自带上传组件。 访问地址：
|
||||||
<a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
|
<a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
|
||||||
</div>
|
</div>
|
||||||
<el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple>
|
<el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple :on-change="handle">
|
||||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||||
<div class="el-upload__text">
|
<div class="el-upload__text">
|
||||||
将文件拖到此处，或
|
将文件拖到此处，或
|
||||||
|
|
@ -25,6 +25,12 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
const handle = (rawFile:any)=>{
|
||||||
|
console.log(rawFile);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.content-title {
|
.content-title {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
Loading…
Reference in New Issue