fix:文件名改为小写

src/components/Header.vue → src/components/header.vue

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

src/components/Sidebar.vue → src/components/sidebar.vue

@@ -1,164 +1,164 @@
-<template>
-	<div class="sidebar">
-		<el-menu
-			class="sidebar-el-menu"
-			:default-active="onRoutes"
-			:collapse="sidebar.collapse"
-			background-color="#324157"
-			text-color="#bfcbd9"
-			active-text-color="#20a0ff"
-			unique-opened
-			router
-		>
-			<template v-for="item in items">
-				<template v-if="item.subs">
-					<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
-						<template #title>
-							<el-icon>
-								<component :is="item.icon"></component>
-							</el-icon>
-							<span>{{ item.title }}</span>
-						</template>
-						<template v-for="subItem in item.subs">
-							<el-sub-menu
-								v-if="subItem.subs"
-								:index="subItem.index"
-								:key="subItem.index"
-								v-permiss="item.permiss"
-							>
-								<template #title>{{ subItem.title }}</template>
-								<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
-									{{ threeItem.title }}
-								</el-menu-item>
-							</el-sub-menu>
-							<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
-								{{ subItem.title }}
-							</el-menu-item>
-						</template>
-					</el-sub-menu>
-				</template>
-				<template v-else>
-					<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
-						<el-icon>
-							<component :is="item.icon"></component>
-						</el-icon>
-						<template #title>{{ item.title }}</template>
-					</el-menu-item>
-				</template>
-			</template>
-		</el-menu>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import { useSidebarStore } from '../store/sidebar';
-import { useRoute } from 'vue-router';
-
-const items = [
-	{
-		icon: 'Odometer',
-		index: '/dashboard',
-		title: '系统首页',
-		permiss: '1'
-	},
-	{
-		icon: 'Calendar',
-		index: '/table',
-		title: '基础表格',
-		permiss: '2'
-	},
-	{
-		icon: 'DocumentCopy',
-		index: '/tabs',
-		title: 'tab选项卡',
-		permiss: '3'
-	},
-	{
-		icon: 'Edit',
-		index: '3',
-		title: '表单相关',
-		permiss: '4',
-		subs: [
-			{
-				index: '/form',
-				title: '基本表单',
-				permiss: '5'
-			},
-			{
-				index: '/upload',
-				title: '文件上传',
-				permiss: '6'
-			},
-			{
-				index: '4',
-				title: '三级菜单',
-				permiss: '7',
-				subs: [
-					{
-						index: '/editor',
-						title: '富文本编辑器',
-						permiss: '8'
-					},
-					{
-						index: '/markdown',
-						title: 'markdown编辑器',
-						permiss: '9'
-					}
-				]
-			}
-		]
-	},
-	{
-		icon: 'Setting',
-		index: '/icon',
-		title: '自定义图标',
-		permiss: '10'
-	},
-	{
-		icon: 'PieChart',
-		index: '/charts',
-		title: 'schart图表',
-		permiss: '11'
-	},
-	{
-		icon: 'Warning',
-		index: '/permission',
-		title: '权限管理',
-		permiss: '13'
-	},
-	{
-		icon: 'CoffeeCup',
-		index: '/donate',
-		title: '支持作者',
-		permiss: '14'
-	}
-];
-
-const route = useRoute();
-const onRoutes = computed(() => {
-	return route.path;
-});
-
-const sidebar = useSidebarStore();
-</script>
-
-<style scoped>
-.sidebar {
-	display: block;
-	position: absolute;
-	left: 0;
-	top: 70px;
-	bottom: 0;
-	overflow-y: scroll;
-}
-.sidebar::-webkit-scrollbar {
-	width: 0;
-}
-.sidebar-el-menu:not(.el-menu--collapse) {
-	width: 250px;
-}
-.sidebar > ul {
-	height: 100%;
-}
-</style>
+<template>
+	<div class="sidebar">
+		<el-menu
+			class="sidebar-el-menu"
+			:default-active="onRoutes"
+			:collapse="sidebar.collapse"
+			background-color="#324157"
+			text-color="#bfcbd9"
+			active-text-color="#20a0ff"
+			unique-opened
+			router
+		>
+			<template v-for="item in items">
+				<template v-if="item.subs">
+					<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.permiss">
+						<template #title>
+							<el-icon>
+								<component :is="item.icon"></component>
+							</el-icon>
+							<span>{{ item.title }}</span>
+						</template>
+						<template v-for="subItem in item.subs">
+							<el-sub-menu
+								v-if="subItem.subs"
+								:index="subItem.index"
+								:key="subItem.index"
+								v-permiss="item.permiss"
+							>
+								<template #title>{{ subItem.title }}</template>
+								<el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
+									{{ threeItem.title }}
+								</el-menu-item>
+							</el-sub-menu>
+							<el-menu-item v-else :index="subItem.index" v-permiss="item.permiss">
+								{{ subItem.title }}
+							</el-menu-item>
+						</template>
+					</el-sub-menu>
+				</template>
+				<template v-else>
+					<el-menu-item :index="item.index" :key="item.index" v-permiss="item.permiss">
+						<el-icon>
+							<component :is="item.icon"></component>
+						</el-icon>
+						<template #title>{{ item.title }}</template>
+					</el-menu-item>
+				</template>
+			</template>
+		</el-menu>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useSidebarStore } from '../store/sidebar';
+import { useRoute } from 'vue-router';
+
+const items = [
+	{
+		icon: 'Odometer',
+		index: '/dashboard',
+		title: '系统首页',
+		permiss: '1'
+	},
+	{
+		icon: 'Calendar',
+		index: '/table',
+		title: '基础表格',
+		permiss: '2'
+	},
+	{
+		icon: 'DocumentCopy',
+		index: '/tabs',
+		title: 'tab选项卡',
+		permiss: '3'
+	},
+	{
+		icon: 'Edit',
+		index: '3',
+		title: '表单相关',
+		permiss: '4',
+		subs: [
+			{
+				index: '/form',
+				title: '基本表单',
+				permiss: '5'
+			},
+			{
+				index: '/upload',
+				title: '文件上传',
+				permiss: '6'
+			},
+			{
+				index: '4',
+				title: '三级菜单',
+				permiss: '7',
+				subs: [
+					{
+						index: '/editor',
+						title: '富文本编辑器',
+						permiss: '8'
+					},
+					{
+						index: '/markdown',
+						title: 'markdown编辑器',
+						permiss: '9'
+					}
+				]
+			}
+		]
+	},
+	{
+		icon: 'Setting',
+		index: '/icon',
+		title: '自定义图标',
+		permiss: '10'
+	},
+	{
+		icon: 'PieChart',
+		index: '/charts',
+		title: 'schart图表',
+		permiss: '11'
+	},
+	{
+		icon: 'Warning',
+		index: '/permission',
+		title: '权限管理',
+		permiss: '13'
+	},
+	{
+		icon: 'CoffeeCup',
+		index: '/donate',
+		title: '支持作者',
+		permiss: '14'
+	}
+];
+
+const route = useRoute();
+const onRoutes = computed(() => {
+	return route.path;
+});
+
+const sidebar = useSidebarStore();
+</script>
+
+<style scoped>
+.sidebar {
+	display: block;
+	position: absolute;
+	left: 0;
+	top: 70px;
+	bottom: 0;
+	overflow-y: scroll;
+}
+.sidebar::-webkit-scrollbar {
+	width: 0;
+}
+.sidebar-el-menu:not(.el-menu--collapse) {
+	width: 250px;
+}
+.sidebar > ul {
+	height: 100%;
+}
+</style>

src/components/Tags.vue → src/components/tags.vue

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

src/views/Home.vue → src/views/home.vue

@@ -1,26 +1,26 @@
-<template>
-	<v-header />
-	<v-sidebar />
-	<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
-		<v-tags></v-tags>
-		<div class="content">
-			<router-view v-slot="{ Component }">
-				<transition name="move" mode="out-in">
-					<keep-alive :include="tags.nameList">
-						<component :is="Component"></component>
-					</keep-alive>
-				</transition>
-			</router-view>
-		</div>
-	</div>
-</template>
-<script setup lang="ts">
-import { useSidebarStore } from '../store/sidebar';
-import { useTagsStore } from '../store/tags';
-import vHeader from '../components/header.vue';
-import vSidebar from '../components/sidebar.vue';
-import vTags from '../components/tags.vue';
-
-const sidebar = useSidebarStore();
-const tags = useTagsStore();
-</script>
+<template>
+	<v-header />
+	<v-sidebar />
+	<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
+		<v-tags></v-tags>
+		<div class="content">
+			<router-view v-slot="{ Component }">
+				<transition name="move" mode="out-in">
+					<keep-alive :include="tags.nameList">
+						<component :is="Component"></component>
+					</keep-alive>
+				</transition>
+			</router-view>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import { useSidebarStore } from '../store/sidebar';
+import { useTagsStore } from '../store/tags';
+import vHeader from '../components/header.vue';
+import vSidebar from '../components/sidebar.vue';
+import vTags from '../components/tags.vue';
+
+const sidebar = useSidebarStore();
+const tags = useTagsStore();
+</script>

src/views/Login.vue → src/views/login.vue

@@ -1,129 +1,129 @@
-<template>
-	<div class="login-wrap">
-		<div class="ms-login">
-			<div class="ms-title">后台管理系统</div>
-			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
-				<el-form-item prop="username">
-					<el-input v-model="param.username" placeholder="username">
-						<template #prepend>
-							<el-button :icon="User"></el-button>
-						</template>
-					</el-input>
-				</el-form-item>
-				<el-form-item prop="password">
-					<el-input
-						type="password"
-						placeholder="password"
-						v-model="param.password"
-						@keyup.enter="submitForm(login)"
-					>
-						<template #prepend>
-							<el-button :icon="Lock"></el-button>
-						</template>
-					</el-input>
-				</el-form-item>
-				<div class="login-btn">
-					<el-button type="primary" @click="submitForm(login)">登录</el-button>
-				</div>
-				<p class="login-tips">Tips : 用户名和密码随便填。</p>
-			</el-form>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue';
-import { useTagsStore } from '../store/tags';
-import { usePermissStore } from '../store/permiss';
-import { useRouter } from 'vue-router';
-import { ElMessage } from 'element-plus';
-import type { FormInstance, FormRules } from 'element-plus';
-import { Lock, User } from '@element-plus/icons-vue';
-
-interface LoginInfo {
-	username: string;
-	password: string;
-}
-
-const router = useRouter();
-const param = reactive<LoginInfo>({
-	username: 'admin',
-	password: '123123'
-});
-
-const rules: FormRules = {
-	username: [
-		{
-			required: true,
-			message: '请输入用户名',
-			trigger: 'blur'
-		}
-	],
-	password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
-};
-const permiss = usePermissStore();
-const login = ref<FormInstance>();
-const submitForm = (formEl: FormInstance | undefined) => {
-	if (!formEl) return;
-	formEl.validate((valid: boolean) => {
-		if (valid) {
-			ElMessage.success('登录成功');
-			localStorage.setItem('ms_username', param.username);
-			const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
-			permiss.handleSet(keys);
-			localStorage.setItem('ms_keys', JSON.stringify(keys));
-			router.push('/');
-		} else {
-			ElMessage.error('登录成功');
-			return false;
-		}
-	});
-};
-
-const tags = useTagsStore();
-tags.clearTags();
-</script>
-
-<style scoped>
-.login-wrap {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	background-image: url(../assets/img/login-bg.jpg);
-	background-size: 100%;
-}
-.ms-title {
-	width: 100%;
-	line-height: 50px;
-	text-align: center;
-	font-size: 20px;
-	color: #fff;
-	border-bottom: 1px solid #ddd;
-}
-.ms-login {
-	position: absolute;
-	left: 50%;
-	top: 50%;
-	width: 350px;
-	margin: -190px 0 0 -175px;
-	border-radius: 5px;
-	background: rgba(255, 255, 255, 0.3);
-	overflow: hidden;
-}
-.ms-content {
-	padding: 30px 30px;
-}
-.login-btn {
-	text-align: center;
-}
-.login-btn button {
-	width: 100%;
-	height: 36px;
-	margin-bottom: 10px;
-}
-.login-tips {
-	font-size: 12px;
-	line-height: 30px;
-	color: #fff;
-}
-</style>
+<template>
+	<div class="login-wrap">
+		<div class="ms-login">
+			<div class="ms-title">后台管理系统</div>
+			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
+				<el-form-item prop="username">
+					<el-input v-model="param.username" placeholder="username">
+						<template #prepend>
+							<el-button :icon="User"></el-button>
+						</template>
+					</el-input>
+				</el-form-item>
+				<el-form-item prop="password">
+					<el-input
+						type="password"
+						placeholder="password"
+						v-model="param.password"
+						@keyup.enter="submitForm(login)"
+					>
+						<template #prepend>
+							<el-button :icon="Lock"></el-button>
+						</template>
+					</el-input>
+				</el-form-item>
+				<div class="login-btn">
+					<el-button type="primary" @click="submitForm(login)">登录</el-button>
+				</div>
+				<p class="login-tips">Tips : 用户名和密码随便填。</p>
+			</el-form>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { useTagsStore } from '../store/tags';
+import { usePermissStore } from '../store/permiss';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import type { FormInstance, FormRules } from 'element-plus';
+import { Lock, User } from '@element-plus/icons-vue';
+
+interface LoginInfo {
+	username: string;
+	password: string;
+}
+
+const router = useRouter();
+const param = reactive<LoginInfo>({
+	username: 'admin',
+	password: '123123'
+});
+
+const rules: FormRules = {
+	username: [
+		{
+			required: true,
+			message: '请输入用户名',
+			trigger: 'blur'
+		}
+	],
+	password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
+};
+const permiss = usePermissStore();
+const login = ref<FormInstance>();
+const submitForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return;
+	formEl.validate((valid: boolean) => {
+		if (valid) {
+			ElMessage.success('登录成功');
+			localStorage.setItem('ms_username', param.username);
+			const keys = permiss.defaultList[param.username == 'admin' ? 'admin' : 'user'];
+			permiss.handleSet(keys);
+			localStorage.setItem('ms_keys', JSON.stringify(keys));
+			router.push('/');
+		} else {
+			ElMessage.error('登录成功');
+			return false;
+		}
+	});
+};
+
+const tags = useTagsStore();
+tags.clearTags();
+</script>
+
+<style scoped>
+.login-wrap {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	background-image: url(../assets/img/login-bg.jpg);
+	background-size: 100%;
+}
+.ms-title {
+	width: 100%;
+	line-height: 50px;
+	text-align: center;
+	font-size: 20px;
+	color: #fff;
+	border-bottom: 1px solid #ddd;
+}
+.ms-login {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	width: 350px;
+	margin: -190px 0 0 -175px;
+	border-radius: 5px;
+	background: rgba(255, 255, 255, 0.3);
+	overflow: hidden;
+}
+.ms-content {
+	padding: 30px 30px;
+}
+.login-btn {
+	text-align: center;
+}
+.login-btn button {
+	width: 100%;
+	height: 36px;
+	margin-bottom: 10px;
+}
+.login-tips {
+	font-size: 12px;
+	line-height: 30px;
+	color: #fff;
+}
+</style>

src/views/Markdown.vue → src/views/markdown.vue

@@ -1,21 +1,21 @@
-<template>
-	<div class="container">
-		<div class="plugins-tips">
-			md-editor-v3：vue3版本的 markdown 编辑器，配置丰富，请详看文档。 访问地址：
-			<a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
-		</div>
-		<md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg" />
-		<el-button type="primary">提交</el-button>
-	</div>
-</template>
-
-<script setup lang="ts" name="md">
-import { ref } from 'vue';
-import MdEditor from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
-
-const text = ref('Hello Editor!');
-const onUploadImg = (files: any) => {
-	console.log(files);
-};
-</script>
+<template>
+	<div class="container">
+		<div class="plugins-tips">
+			md-editor-v3：vue3版本的 markdown 编辑器，配置丰富，请详看文档。 访问地址：
+			<a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
+		</div>
+		<md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg" />
+		<el-button type="primary">提交</el-button>
+	</div>
+</template>
+
+<script setup lang="ts" name="md">
+import { ref } from 'vue';
+import MdEditor from 'md-editor-v3';
+import 'md-editor-v3/lib/style.css';
+
+const text = ref('Hello Editor!');
+const onUploadImg = (files: any) => {
+	console.log(files);
+};
+</script>

src/views/Upload.vue → src/views/upload.vue

@@ -5,7 +5,7 @@
 			Element Plus自带上传组件。 访问地址：
 			<a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
 		</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>
 			<div class="el-upload__text">
 				将文件拖到此处，或
@@ -25,6 +25,12 @@
 	</div>
 </template>
 
+<script setup lang="ts">
+const handle = (rawFile:any)=>{
+	console.log(rawFile);
+}
+</script>
+
 <style scoped>
 .content-title {
 	font-weight: 400;