更新默认首页显示问题

package.json

@@ -9,7 +9,7 @@
 		"lint:eslint": "eslint \"./src/**/*.{vue,ts,tsx}\" --fix"
 	},
 	"dependencies": {
-		"@cool-vue/crud": "^7.0.7",
+		"@cool-vue/crud": "^7.0.8",
 		"@element-plus/icons-vue": "^2.1.0",
 		"@vueuse/core": "^10.4.0",
 		"@wangeditor/editor": "^5.1.23",

packages/crud/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cool-vue/crud",
-	"version": "7.0.7",
+	"version": "7.0.8",
 	"private": false,
 	"main": "./dist/index.umd.min.js",
 	"typings": "types/index.d.ts",

packages/crud/src/components/form/index.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, h, nextTick } from "vue";
-import { cloneDeep, isBoolean, isEmpty } from "lodash-es";
+import { cloneDeep, isBoolean } from "lodash-es";
 import { useAction, useForm, usePlugins, useTabs } from "./helper";
 import { useBrowser, useConfig, useElApi, useRefs } from "../../hooks";
 import { getValue, merge } from "../../utils";

packages/crud/src/static/index.scss

@@ -1,6 +1,6 @@
 .cl-crud {
 	height: 100%;
-	overflow: auto;
+	overflow: hidden auto;
 	position: relative;
 	box-sizing: border-box;
 	background-color: #fff;
@@ -362,7 +362,9 @@
 		position: absolute;
 		bottom: -1px;
 		left: 0;
-		transition: transform 0.3s ease-in-out, width 0.2s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+		transition:
+			transform 0.3s ease-in-out,
+			width 0.2s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 		background-color: var(--el-color-primary);
 	}
 

src/modules/base/pages/main/components/amenu.vue

@@ -6,10 +6,10 @@
 			background-color="transparent"
 			@select="select"
 		>
-			<template v-for="(item, index) in menu.group" :key="index">
-				<el-menu-item :index="`${index}`" v-if="item.isShow">
+			<template v-for="(item, index) in list" :key="item.id">
+				<el-menu-item :index="`${index}`">
 					<cl-svg v-if="item.icon" :name="item.icon" :size="18" />
-					<span class="a-menu__name">{{ item.name }}</span>
+					<span class="a-menu__name">{{ item.meta?.label }}</span>
 				</el-menu-item>
 			</template>
 		</el-menu>
@@ -17,52 +17,82 @@
 </template>
 
 <script lang="ts" name="a-menu" setup>
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 import { useBase, Menu } from "/$/base";
 import { useCool } from "/@/cool";
+import { ElMessage } from "element-plus";
 
 const { router, route } = useCool();
 const { menu } = useBase();
 
 // 选中标识
-const active = ref("");
+const active = ref("0");
+
+// 组列表
+const list = computed(() => {
+	return menu.group.filter((e) => e.isShow);
+});
 
 // 选择导航
 function select(index: any) {
-	menu.setMenu(index);
+	if (String(index) == active.value) {
+		return false;
+	}
+
+	// 选中的组
+	const item = list.value[index];
 
 	// 获取第一个菜单地址
-	const url = menu.getPath(menu.group[index]);
-	router.push(url);
+	const url = menu.getPath(item);
+
+	if (url) {
+		// 设置左侧菜单
+		menu.setMenu(index);
+
+		// 跳转
+		router.push(url);
+	} else {
+		ElMessage.warning(`“${item.meta?.label}”下没有菜单，请先添加`);
+	}
 }
 
 // 刷新
 function refresh() {
+	let index = 0;
+
 	function deep(e: Menu.Item, i: number) {
 		switch (e.type) {
 			case 0:
-				(e.children || []).forEach((e) => {
-					deep(e, i);
-				});
+				if (e.children) {
+					e.children.forEach((e) => {
+						deep(e, i);
+					});
+				}
+
 				break;
 			case 1:
 				if (route.path.includes(e.path)) {
-					active.value = String(i);
-					menu.setMenu(i);
+					index = i;
 				}
 				break;
-			case 2:
 			default:
 				break;
 		}
 	}
 
-	menu.group.forEach(deep);
+	// 遍历所有分组
+	list.value.forEach(deep);
+
+	// 确认选择
+	active.value = String(index);
+
+	// 设置该分组下的菜单
+	menu.setMenu(index);
 }
 
-// 监听分组
+// 监听变化
 watch(
-	() => menu.group.length,
+	() => [route.path, menu.group.length],
 	() => {
 		refresh();
 	},
@@ -70,14 +100,6 @@ watch(
 		immediate: true
 	}
 );
-
-// 监听路由
-watch(
-	() => route.path,
-	() => {
-		refresh();
-	}
-);
 </script>
 
 <style lang="scss" scoped>

src/modules/base/pages/main/components/bmenu.tsx

@@ -33,7 +33,7 @@ export default defineComponent({
 							return (
 								<div class="wrap">
 									<cl-svg name={e.icon} />
-									<span v-show={!app.isFold || index != 1}>{e.name}</span>
+									<span v-show={!app.isFold || index != 1}>{e.meta?.label}</span>
 								</div>
 							);
 						};
@@ -59,7 +59,12 @@ export default defineComponent({
 							html = h(
 								<el-menu-item />,
 								{
-									index: e.path,
+									index:
+										route.path == "/"
+											? e.meta?.isHome
+												? "/"
+												: e.path
+											: e.path,
 									key: e.id
 								},
 								{

src/modules/base/pages/main/components/process.vue

@@ -7,7 +7,7 @@
 			<li class="item" @click="toRefresh">
 				<i class="cl-iconfont cl-icon-refresh"></i>
 			</li>
-			<li class="item" @click="router.push('/')">
+			<li class="item" @click="toHome">
 				<i class="cl-iconfont cl-icon-home"></i>
 			</li>
 		</ul>
@@ -50,6 +50,11 @@ function toRefresh() {
 	mitt.emit("view.refresh");
 }
 
+// 回首页
+function toHome() {
+	router.push("/");
+}
+
 // 跳转
 function toPath() {
 	const d = process.list.find((e) => e.active);

src/modules/base/store/menu.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import { deepTree, revDeepTree, storage } from "/@/cool/utils";
-import { isEmpty, orderBy } from "lodash-es";
+import { cloneDeep, isArray, isEmpty, orderBy } from "lodash-es";
 import { router, service } from "/@/cool";
 import { revisePath } from "../utils";
 import { Menu } from "../types";
@@ -17,9 +17,6 @@ export const useMenuStore = defineStore("menu", function () {
 	// 菜单组
 	const group = ref<Menu.List>(data["base.menuGroup"] || []);
 
-	// 顶部菜单序号
-	const index = ref(0);
-
 	// 左侧菜单列表
 	const list = ref<Menu.List>([]);
 
@@ -27,15 +24,10 @@ export const useMenuStore = defineStore("menu", function () {
 	const perms = ref<any[]>(data["base.menuPerms"] || []);
 
 	// 设置左侧菜单
-	function setMenu(i?: number) {
-		if (i === undefined) {
-			i = index.value;
-		}
-
+	function setMenu(i: number = 0) {
 		// 显示分组显示菜单
 		if (config.app.menu.isGroup) {
-			list.value = group.value[i]?.children || [];
-			index.value = i;
+			list.value = group.value.filter((e) => e.isShow)[i]?.children || [];
 		} else {
 			list.value = group.value;
 		}
@@ -71,30 +63,35 @@ export const useMenuStore = defineStore("menu", function () {
 
 	// 设置视图
 	function setRoutes(list: Menu.List) {
-		// 默认第一个菜单为首页
-		const fp = getPath(group.value[0]);
+		// 获取第一个菜单路径
+		const fp = getPath(group.value);
 
 		// 查找符合路由
-		const route = list.find((e) => e.path == fp);
+		const route = list.find((e) => (e.meta!.isHome = e.path == fp));
 
 		if (route) {
-			// 判断是否已经注册
-			if (!router.getRoutes().find((e) => e.name == "home")) {
-				const newRoute = {
-					...route,
-					path: "/",
-					name: "home"
-				};
-				router.append([Object.assign({}, newRoute)]);
+			const home = router.getRoutes().find((e) => e.meta.isHome);
+
+			// 判断是否存在
+			if (!home) {
+				router.append([
+					{
+						...route,
+						path: "/",
+						name: "home"
+					}
+				]);
+			} else {
+				Object.assign(home.meta, route.meta);
 			}
 		}
 
-		routes.value = list;
+		routes.value = list.filter((e) => e.type == 1);
 	}
 
 	// 设置菜单组
 	function setGroup(list: Menu.List) {
-		group.value = orderBy(list, "orderNum");
+		group.value = orderBy(deepTree(list), "orderNum");
 		storage.set("base.menuGroup", group.value);
 	}
 
@@ -113,9 +110,10 @@ export const useMenuStore = defineStore("menu", function () {
 						isShow,
 						meta: {
 							...e.meta,
-							label: e.name,
+							label: e.name, // 菜单名称的唯一标识
 							keepAlive: e.keepAlive || 0
 						},
+						name: `${e.name}-${e.id}`, // 避免重复命名之前的冲突
 						children: []
 					};
 				});
@@ -124,13 +122,13 @@ export const useMenuStore = defineStore("menu", function () {
 			setPerms(res.perms || []);
 
 			// 设置菜单组
-			setGroup(deepTree(list));
+			setGroup(list);
 
 			// 设置视图路由
-			setRoutes(list.filter((e) => e.type == 1));
+			setRoutes(list);
 
 			// 设置菜单
-			setMenu(index.value);
+			setMenu();
 
 			return list;
 		}
@@ -147,38 +145,34 @@ export const useMenuStore = defineStore("menu", function () {
 	}
 
 	// 获取菜单路径
-	function getPath(item?: Menu.Item) {
+	function getPath(data: Menu.Item | Menu.List) {
+		const list = isArray(data) ? data : [data];
+
 		let path = "";
 
-		switch (item?.type) {
-			case 0:
-				function deep(arr: Menu.List) {
-					arr.forEach((e: Menu.Item) => {
-						if (e.type == 1) {
-							if (!path) {
-								path = e.path;
-							}
-						} else {
-							deep(e.children || []);
+		function deep(arr: Menu.List) {
+			arr.forEach((e: Menu.Item) => {
+				switch (e.type) {
+					case 0:
+						deep(e.children || []);
+						break;
+					case 1:
+						if (!path) {
+							path = e.path;
 						}
-					});
+						break;
 				}
-
-				deep(item.children || group.value || []);
-				break;
-
-			case 1:
-				path = item.path;
-				break;
+			});
 		}
 
-		return path || "/";
+		deep(list);
+
+		return path;
 	}
 
 	return {
 		routes,
 		group,
-		index,
 		list,
 		perms,
 		get,

src/modules/base/store/process.ts

@@ -11,7 +11,7 @@ export const useProcessStore = defineStore("process", function () {
 			e.active = false;
 		});
 
-		if (data.path != "/" && data.meta?.process !== false) {
+		if (!data.meta?.isHome && data.meta?.process !== false) {
 			const index = list.value.findIndex((e) => e.path === data.path);
 
 			if (index < 0) {

src/modules/base/types/index.d.ts

@@ -23,6 +23,8 @@ export declare namespace Menu {
 			label?: string;
 			keepAlive?: number | boolean;
 			iframeUrl?: string;
+			isHome?: boolean;
+			[key: string]: any;
 		};
 		children?: Item[];
 		component?: RouteComponent;

src/modules/base/views/param.vue

@@ -141,7 +141,7 @@ const Upsert = useUpsert({
 			component: {
 				name: "el-input",
 				props: {
-					rows: 6,
+					rows: 12,
 					type: "textarea"
 				}
 			}

src/modules/crud/config.ts

@@ -1,12 +1,12 @@
 import { Merge, ModuleConfig } from "/@/cool";
 
 // npm
-import Crud, { locale } from "@cool-vue/crud";
-import "@cool-vue/crud/dist/index.css";
+// import Crud, { locale } from "@cool-vue/crud";
+// import "@cool-vue/crud/dist/index.css";
 
 // 调试、自定义crud
-// import Crud, { locale } from "../../../packages/crud/src";
-// import "../../../packages/crud/src/static/index.scss";
+import Crud, { locale } from "../../../packages/crud/src";
+import "../../../packages/crud/src/static/index.scss";
 
 export default (): Merge<ModuleConfig, CrudOptions> => {
 	return {

src/modules/demo/components/select-user.vue

@@ -7,7 +7,7 @@
 			>
 		</div>
 
-		<cl-crud :padding="0">
+		<cl-crud padding="0">
 			<cl-table :data="data" :ref="setRefs('table')" :auto-height="false" />
 
 			<cl-row type="flex" align="middle" justify="end" :style="{ marginTop: '10px' }">
@@ -23,7 +23,7 @@
 	</div>
 
 	<cl-dialog v-model="visible" width="1200px" title="选择用户">
-		<cl-crud ref="Crud">
+		<cl-crud ref="Crud" padding="0">
 			<cl-row>
 				<!-- 刷新按钮 -->
 				<cl-refresh-btn />
@@ -187,7 +187,7 @@ const selection = ref<any[]>([]);
 // 分页
 const pager = reactive({
 	page: 1,
-	size: 2
+	size: 10
 });
 
 // 分页数据

src/modules/demo/views/crud.vue

@@ -88,11 +88,7 @@
 		</cl-row>
 
 		<!-- 新增、编辑 -->
-		<cl-upsert ref="Upsert">
-			<template #slot-userIds="{ scope }">
-				<select-user v-model="scope.userIds" />
-			</template>
-		</cl-upsert>
+		<cl-upsert ref="Upsert" />
 
 		<!-- 高级搜索 -->
 		<cl-adv-search ref="AdvSearch" />
@@ -261,8 +257,9 @@ const Upsert = useUpsert({
 			props: {
 				labelWidth: "0px"
 			},
+			required: true,
 			component: {
-				name: "slot-userIds"
+				vm: SelectUser
 			}
 		},
 

yarn.lock

@@ -344,10 +344,10 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@cool-vue/crud@^7.0.7":
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.7.tgz#26362fda216a29636bbe0fb9ff4b2e792eecd235"
-  integrity sha512-IttV+abWH4AcQmIwLeeK2SWo9NMQdodQaRdAvKaf7SgWLO7K7l99gPIspyZzlQUDOfNr3lVFrlDSjIbApJpP1w==
+"@cool-vue/crud@^7.0.8":
+  version "7.0.8"
+  resolved "https://registry.yarnpkg.com/@cool-vue/crud/-/crud-7.0.8.tgz#14855d5a326b5f91bb35b5791954341e5a61db23"
+  integrity sha512-hI8cyoRnRrwPNsyoVtb6nVCKVFFbsqhFH6HR1B2/NVRqfn87wvDoQ2kkm76K7kafO/bZM9WJu8tetYuqkaSoOw==
   dependencies:
     array.prototype.flat "^1.2.4"
     core-js "^3.21.1"