优化菜单

src/cool/config/index.ts

@@ -22,6 +22,8 @@ export const config = {
 		router: {
 			// 模式
 			mode: "history",
+			// 转场动画
+			transition: "slide",
 			// 首页组件
 			home: () => import("/$/demo/views/home/index.vue")
 		},

src/cool/router/index.ts

@@ -44,6 +44,10 @@ router.append = function (data) {
 			d.name = d.path.substring(1);
 		}
 
+		if (!d.meta) {
+			d.meta = {};
+		}
+
 		if (!d.component) {
 			const url = d.viewPath;
 
@@ -62,6 +66,8 @@ router.append = function (data) {
 			}
 		}
 
+		d.meta.dynamic = true;
+
 		if (d.isPage) {
 			router.addRoute(d);
 		} else {
@@ -70,6 +76,17 @@ router.append = function (data) {
 	});
 };
 
+// 清空路由
+router.clear = function () {
+	const rs = router.getRoutes();
+
+	rs.forEach((e) => {
+		if (e.name) {
+			router.removeRoute(e.name);
+		}
+	});
+};
+
 // 找路由
 router.find = function (path: string) {
 	return router.getRoutes().find((e) => e.path == path);

src/modules/base/layout/components/bmenu.tsx

@@ -1,4 +1,4 @@
-import { h, ref, watch } from "vue";
+import { h } from "vue";
 import { useStore } from "../../store";
 import { Menu } from "../../types";
 import { useCool } from "/@/cool";
@@ -10,9 +10,6 @@ export default {
 		const { router, route } = useCool();
 		const { menu, app } = useStore();
 
-		// 是否可见
-		const visible = ref(true);
-
 		// 页面跳转
 		function toView(url: string) {
 			if (url != route.path) {
@@ -25,23 +22,9 @@ export default {
 			}
 		}
 
-		// 刷新菜单
-		function refresh() {
-			visible.value = false;
-
-			setTimeout(() => {
-				visible.value = true;
-			}, 0);
-		}
-
-		// 监听菜单变化
-		watch(menu.list, refresh);
-
 		return {
 			route,
-			visible,
 			toView,
-			refresh,
 			menu
 		};
 	},
@@ -105,19 +88,17 @@ export default {
 		const children = deep(ctx.menu.list, 1);
 
 		return (
-			ctx.visible && (
-				<div class="app-slider__menu">
-					<el-menu
-						default-active={ctx.route.path}
-						background-color="transparent"
-						collapse-transition={false}
-						collapse={app.browser.isMini ? false : app.isFold}
-						onSelect={ctx.toView}
-					>
-						{children}
-					</el-menu>
-				</div>
-			)
+			<div class="app-slider__menu">
+				<el-menu
+					default-active={ctx.route.path}
+					background-color="transparent"
+					collapse-transition={true}
+					collapse={app.browser.isMini ? false : app.isFold}
+					onSelect={ctx.toView}
+				>
+					{children}
+				</el-menu>
+			</div>
 		);
 	}
 };

src/modules/base/layout/components/views.vue

@@ -2,7 +2,7 @@
 	<div class="app-views">
 		<router-view v-slot="{ Component }">
 			<el-scrollbar>
-				<transition name="slide">
+				<transition :name="app.info.router.transition">
 					<keep-alive :include="caches">
 						<component :is="Component" />
 					</keep-alive>
@@ -16,7 +16,7 @@
 import { computed } from "vue";
 import { useBase } from "/$/base";
 
-const { process } = useBase();
+const { process, app } = useBase();
 
 // 缓存列表
 const caches = computed(() => {

src/modules/base/pages/login/index.vue

@@ -50,6 +50,7 @@
 
 				<div class="op">
 					<el-button round :loading="saving" @click="toLogin">登录</el-button>
+					<el-button round @click="toTest">Test</el-button>
 				</div>
 			</el-form>
 		</div>
@@ -77,6 +78,10 @@ const form = reactive({
 	verifyCode: ""
 });
 
+function toTest() {
+	router.push("/my/info");
+}
+
 // 登录
 async function toLogin() {
 	if (!form.username) {

src/modules/base/store/user.ts

@@ -77,6 +77,7 @@ export const useUserStore = defineStore("user", function () {
 	// 退出
 	async function logout() {
 		clear();
+		router.clear();
 		router.push("/login");
 	}