From 1248d83ab558550572220c518f254cd8b0c6bb09 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Thu, 9 May 2024 14:55:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=A7=A9=20=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E7=94=9F=E6=88=90=E6=97=A0=E6=B3=95=E6=B7=B1=E6=8B=B7=E8=B4=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  | 85 ++++++++++---------
 package-lock.json                             |  4 +-
 package.json                                  |  1 +
 src/router/index.ts                           |  7 +-
 src/router/module/pageRoutes.ts               | 48 ++++++++---
 src/utils/file/routeFileUtil.ts               | 16 ++--
 src/views/bunny/default/My.vue                |  4 +
 src/views/bunny/default/Myy.vue               |  1 -
 src/views/bunny/default/page.ts               |  2 +-
 src/views/bunny/my/a/aChildren.vue            |  3 +
 src/views/bunny/my/a/b/index.vue              |  3 +
 src/views/bunny/my/a/index.vue                | 10 +++
 src/views/bunny/my/index.vue                  |  2 +-
 src/views/bunny/my/page.ts                    | 10 +++
 .../home/common/about/{page.ts => page.js}    |  0
 src/views/layout.vue                          |  2 +-
 src/vite-env.d.ts                             |  2 +
 17 files changed, 127 insertions(+), 73 deletions(-)
 create mode 100644 src/views/bunny/default/My.vue
 delete mode 100644 src/views/bunny/default/Myy.vue
 create mode 100644 src/views/bunny/my/a/aChildren.vue
 create mode 100644 src/views/bunny/my/a/b/index.vue
 create mode 100644 src/views/bunny/my/a/index.vue
 create mode 100644 src/views/bunny/my/page.ts
 rename src/views/home/common/about/{page.ts => page.js} (100%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 7f2661d..aebb857 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,26 +1,26 @@
 // @see: http://eslint.cn
 
-module.exports= {
+module.exports = {
 	root: true,
 	env: {
 		browser: true,
 		node: true,
-		es6: true
+		es6: true,
 	},
 	/* 指定如何解析语法 */
-	parser: "vue-eslint-parser",
+	parser: 'vue-eslint-parser',
 	/* 优先级低于 parse 的语法解析配置 */
 	parserOptions: {
-		parser: "@typescript-eslint/parser",
+		parser: '@typescript-eslint/parser',
 		ecmaVersion: 2020,
-		sourceType: "module",
-		jsxPragma: "React",
+		sourceType: 'module',
+		jsxPragma: 'React',
 		ecmaFeatures: {
-			jsx: true
-		}
+			jsx: true,
+		},
 	},
 	/* 继承某些已有的规则 */
-	extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended", "prettier", "plugin:prettier/recommended"],
+	extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:prettier/recommended'],
 	/*
 	 * "off" 或 0    ==>  关闭规则
 	 * "warn" 或 1   ==>  打开的规则作为警告（不影响代码执行）
@@ -28,41 +28,42 @@ module.exports= {
 	 */
 	rules: {
 		// eslint (http://eslint.cn/docs/rules)
-		"no-var": "error", // 要求使用 let 或 const 而不是 var
-		"no-multiple-empty-lines": ["error", { max: 1 }], // 不允许多个空行
-		"no-use-before-define": "off", // 禁止在 函数/类/变量 定义之前使用它们
-		"prefer-const": "off", // 此规则旨在标记使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
-		"no-irregular-whitespace": "off", // 禁止不规则的空白
+		'no-var': 'error', // 要求使用 let 或 const 而不是 var
+		'no-multiple-empty-lines': ['error', { max: 1 }], // 不允许多个空行
+		'no-use-before-define': 'off', // 禁止在 函数/类/变量 定义之前使用它们
+		'prefer-const': 'off', // 此规则旨在标记使用 let 关键字声明但在初始分配后从未重新分配的变量，要求使用 const
+		'no-irregular-whitespace': 'off', // 禁止不规则的空白
 
 		// typeScript (https://typescript-eslint.io/rules)
-		"@typescript-eslint/no-unused-vars": "error", // 禁止定义未使用的变量
-		"@typescript-eslint/prefer-ts-expect-error": "error", // 禁止使用 @ts-ignore
-		"@typescript-eslint/no-inferrable-types": "off", // 可以轻松推断的显式类型可能会增加不必要的冗长
-		"@typescript-eslint/no-namespace": "off", // 禁止使用自定义 TypeScript 模块和命名空间。
-		"@typescript-eslint/no-explicit-any": "off", // 禁止使用 any 类型
-		"@typescript-eslint/ban-types": "off", // 禁止使用特定类型
-		"@typescript-eslint/explicit-function-return-type": "off", // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
-		"@typescript-eslint/no-var-requires": "off", // 不允许在 import 语句中使用 require 语句
-		"@typescript-eslint/no-empty-function": "off", // 禁止空函数
-		"@typescript-eslint/no-use-before-define": "off", // 禁止在变量定义之前使用它们
-		"@typescript-eslint/ban-ts-comment": "off", // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
-		"@typescript-eslint/no-non-null-assertion": "off", // 不允许使用后缀运算符的非空断言(!)
-		"@typescript-eslint/explicit-module-boundary-types": "off", // 要求导出函数和类的公共类方法的显式返回和参数类型
+		'@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
+		'@typescript-eslint/prefer-ts-expect-error': 'error', // 禁止使用 @ts-ignore
+		'@typescript-eslint/no-inferrable-types': 'off', // 可以轻松推断的显式类型可能会增加不必要的冗长
+		'@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
+		'@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
+		'@typescript-eslint/ban-types': 'off', // 禁止使用特定类型
+		'@typescript-eslint/explicit-function-return-type': 'off', // 不允许对初始化为数字、字符串或布尔值的变量或参数进行显式类型声明
+		'@typescript-eslint/no-var-requires': 'off', // 不允许在 import 语句中使用 require 语句
+		'@typescript-eslint/no-empty-function': 'off', // 禁止空函数
+		'@typescript-eslint/no-use-before-define': 'off', // 禁止在变量定义之前使用它们
+		'@typescript-eslint/ban-ts-comment': 'off', // 禁止 @ts-<directive> 使用注释或要求在指令后进行描述
+		'@typescript-eslint/no-non-null-assertion': 'off', // 不允许使用后缀运算符的非空断言(!)
+		'@typescript-eslint/explicit-module-boundary-types': 'off', // 要求导出函数和类的公共类方法的显式返回和参数类型
+		'@typescript-eslint/no-unused-vars': 'off',
 
 		// vue (https://eslint.vuejs.org/rules)
-		"vue/no-v-html": "off", // 禁止使用 v-html
-		"vue/script-setup-uses-vars": "error", // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。
-		"vue/v-slot-style": "error", // 强制执行 v-slot 指令样式
-		"vue/no-mutating-props": "off", // 不允许组件 prop的改变
-		"vue/custom-event-name-casing": "off", // 为自定义事件名称强制使用特定大小写
-		"vue/attributes-order": "off", // vue api使用顺序，强制执行属性顺序
-		"vue/one-component-per-file": "off", // 强制每个组件都应该在自己的文件中
-		"vue/html-closing-bracket-newline": "off", // 在标签的右括号之前要求或禁止换行
-		"vue/max-attributes-per-line": "off", // 强制每行的最大属性数
-		"vue/multiline-html-element-content-newline": "off", // 在多行元素的内容之前和之后需要换行符
-		"vue/singleline-html-element-content-newline": "off", // 在单行元素的内容之前和之后需要换行符
-		"vue/attribute-hyphenation": "off", // 对模板中的自定义组件强制执行属性命名样式
-		"vue/require-default-prop": "off", // 此规则要求为每个 prop 为必填时，必须提供默认值
-		"vue/multi-word-component-names": "off" // 要求组件名称始终为 “-” 链接的单词
-	}
+		'vue/no-v-html': 'off', // 禁止使用 v-html
+		'vue/script-setup-uses-vars': 'error', // 防止<script setup>使用的变量<template>被标记为未使用，此规则仅在启用该no-unused-vars规则时有效。
+		'vue/v-slot-style': 'error', // 强制执行 v-slot 指令样式
+		'vue/no-mutating-props': 'off', // 不允许组件 prop的改变
+		'vue/custom-event-name-casing': 'off', // 为自定义事件名称强制使用特定大小写
+		'vue/attributes-order': 'off', // vue api使用顺序，强制执行属性顺序
+		'vue/one-component-per-file': 'off', // 强制每个组件都应该在自己的文件中
+		'vue/html-closing-bracket-newline': 'off', // 在标签的右括号之前要求或禁止换行
+		'vue/max-attributes-per-line': 'off', // 强制每行的最大属性数
+		'vue/multiline-html-element-content-newline': 'off', // 在多行元素的内容之前和之后需要换行符
+		'vue/singleline-html-element-content-newline': 'off', // 在单行元素的内容之前和之后需要换行符
+		'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
+		'vue/require-default-prop': 'off', // 此规则要求为每个 prop 为必填时，必须提供默认值
+		'vue/multi-word-component-names': 'off', // 要求组件名称始终为 “-” 链接的单词
+	},
 };
diff --git a/package-lock.json b/package-lock.json
index f287037..b2313aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
 				"dotenv": "^16.4.5",
 				"echarts": "^5.5.0",
 				"loadsh": "^0.0.4",
+				"lodash": "^4.17.21",
 				"mitt": "^3.0.1",
 				"moment": "^2.30.1",
 				"pinia": "^2.1.7",
@@ -10469,8 +10470,7 @@
 		"node_modules/lodash": {
 			"version": "4.17.21",
 			"resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
-			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-			"dev": true
+			"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
 		},
 		"node_modules/lodash.camelcase": {
 			"version": "4.3.0",
diff --git a/package.json b/package.json
index 825654b..9eb613d 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
 		"dotenv": "^16.4.5",
 		"echarts": "^5.5.0",
 		"loadsh": "^0.0.4",
+		"lodash": "^4.17.21",
 		"mitt": "^3.0.1",
 		"moment": "^2.30.1",
 		"pinia": "^2.1.7",
diff --git a/src/router/index.ts b/src/router/index.ts
index 9fb5e45..5b8b138 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,9 +1,6 @@
 import { statisticRoutes } from '@/router/module/statisticRoutes';
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
-/**
- * * 当需要定死路由时
- * import { pageRoutes } from './module/pageRoutes';
- */
+import { pageRoutes } from './module/pageRoutes';
 
 /**
  * * 如果需要打包成app，则要将路由改为Hash路由，createWebHashHistory
@@ -14,7 +11,7 @@ const router = createRouter({
 		process.env.NODE_ENV === 'production'
 			? createWebHashHistory(import.meta.env.BASE_URL)
 			: createWebHistory(import.meta.env.BASE_URL),
-	routes: [/* ...pageRoutes, */ ...statisticRoutes],
+	routes: [...pageRoutes, ...statisticRoutes],
 });
 
 export default router;
diff --git a/src/router/module/pageRoutes.ts b/src/router/module/pageRoutes.ts
index 56db99e..683b415 100644
--- a/src/router/module/pageRoutes.ts
+++ b/src/router/module/pageRoutes.ts
@@ -1,6 +1,6 @@
 import { routeFilenameHelper } from '@/utils/file/routeFileUtil';
+import _ from 'lodash';
 import { RouteRecordRaw } from 'vue-router';
-import router from '..';
 
 // * 最终路由
 const routeMap: Record<string, RouteRecordRaw> = {};
@@ -11,6 +11,32 @@ const contexts = [
 	{ context: import.meta.glob('@/views/**/page.ts', { eager: true, import: 'default' }), isIndex: false },
 ];
 
+/**
+ * 构建路由信息
+ * @param context 上下文信息
+ * @param isIndex 是否第一次遍历
+ * @param route 路由内容
+ */
+function buildRouteTree(context: any, isIndex: boolean, route: any) {
+	// 遍历当前子路由
+	Object.entries(context).forEach(([filePath, _]) => {
+		// 获取子路由下所有文件对象格式
+		const childrenFileInfo = routeFilenameHelper(filePath);
+		// 组装子路由对象
+		const childrenRoute: any = {
+			name: childrenFileInfo?.name,
+			path: childrenFileInfo!.path,
+			component: isIndex ? () => import(/* @vite-ignore */ `@/views${childrenFileInfo?.replaceName}`) : undefined,
+			children: [],
+			meta: { isFullScreen: false },
+		};
+		// 如果当前路由对象等于当前遍历的路由子对象，将子路由推到父级路由中
+		if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
+			route.children.push(childrenRoute);
+		}
+	});
+}
+
 /**
  * 遍历路由信息
  * @param context 路由上下文
@@ -24,15 +50,21 @@ const createRouteList = (context: any, isIndex: boolean) => {
 			name: fileInfo?.name,
 			path: fileInfo!.path,
 			component: isIndex ? () => import(/* @vite-ignore */ fileInfo!.filePath, {}) : undefined,
+			children: [],
+			meta: { isFullScreen: false },
 		};
+
 		// 初始化赋值
 		if (isIndex) {
 			routeMap[route.path] = route;
+			buildRouteTree(context, isIndex, route);
 		} else {
 			// 导出当前存在的路由并重新赋值
 			const existingRoute = routeMap[route.path];
+			// 当前路由存在
 			if (existingRoute) {
-				routeMap[route.path] = { ...existingRoute, ...(exportRouteConfig as any) };
+				// 使用loadsh合并对象
+				routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
 			}
 		}
 	});
@@ -41,14 +73,4 @@ const createRouteList = (context: any, isIndex: boolean) => {
 // * 生成路由信息
 contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex));
 
-export const pageRoutes: Array<RouteRecordRaw> = [...Object.values(routeMap)];
-
-/**
- * * 示例代码
- * 如果需要动态路由或者其它路由
- * 可以将路由遍历之后使用
- */
-pageRoutes.forEach((item, index) => {
-	// ? router.addRoute('路由的那么', 需要添加路由的值)
-	index & 1 ? router.addRoute('layout', item) : router.addRoute(item);
-});
+export const pageRoutes: Array<RouteRecordRaw> = Object.values(routeMap);
diff --git a/src/utils/file/routeFileUtil.ts b/src/utils/file/routeFileUtil.ts
index 36afb6f..50d4663 100644
--- a/src/utils/file/routeFileUtil.ts
+++ b/src/utils/file/routeFileUtil.ts
@@ -4,22 +4,24 @@
  * @param replaceValue 替换
  * @returns 文件转换对象
  */
-export const routeFilenameHelper = (filePath: string) => {
+export const routeFilenameHelper = (filePath: string, replaceValue = '') => {
 	// 匹配文件列表
 	const fileMatchList = filePath.match(/\/([^/]+)$/);
-
 	// 列表不为空
 	if (fileMatchList !== null) {
-		// 文件+扩展名
-		const fileExtension = fileMatchList[1];
+		const [_, fileWithExtension] = fileMatchList;
 		// 文件名
-		const filename = fileMatchList[1].replace(/\.\w+$/g, '');
+		const filename = fileWithExtension.replace(/\.\w+$/, '');
 		// 路径名带文件名
-		const fullPath = `/${filePath.replace(/\/src\/views\/|(\.\w+)?$/g, '')}`;
+		const fullPath = `/${filePath.replace(/^\/src\/views\/|(\.\w+)?$/g, '')}`;
+
 		// 路径下划线名
 		const name = fullPath.replace(/\/(index|page)|^\//g, '').replace(/\//g, '_');
 		// 路径名不带文件名
 		const path = fullPath.replace(/\/[^/]*$/, '');
-		return { fileExtension, filename, name, fullPath, path, filePath };
+		// 替换后的名字
+		const replaceName = filePath.replace(/\.\//, replaceValue);
+
+		return { fileWithExtension, filename, name, fullPath, path, filePath, replaceName };
 	}
 };
diff --git a/src/views/bunny/default/My.vue b/src/views/bunny/default/My.vue
new file mode 100644
index 0000000..03f149c
--- /dev/null
+++ b/src/views/bunny/default/My.vue
@@ -0,0 +1,4 @@
+<template>sdasd</template>
+
+<script setup lang="ts"></script>
+<style scoped lang="scss"></style>
diff --git a/src/views/bunny/default/Myy.vue b/src/views/bunny/default/Myy.vue
deleted file mode 100644
index c277596..0000000
--- a/src/views/bunny/default/Myy.vue
+++ /dev/null
@@ -1 +0,0 @@
-<template>sdasd</template>
diff --git a/src/views/bunny/default/page.ts b/src/views/bunny/default/page.ts
index a021054..2c225aa 100644
--- a/src/views/bunny/default/page.ts
+++ b/src/views/bunny/default/page.ts
@@ -2,5 +2,5 @@ export default {
 	meta: {
 		title: '',
 	},
-	aaa: 'aaa',
+	name: 'aaa',
 };
diff --git a/src/views/bunny/my/a/aChildren.vue b/src/views/bunny/my/a/aChildren.vue
new file mode 100644
index 0000000..7f7ae5d
--- /dev/null
+++ b/src/views/bunny/my/a/aChildren.vue
@@ -0,0 +1,3 @@
+<template>aChildren.vue</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss"></style>
diff --git a/src/views/bunny/my/a/b/index.vue b/src/views/bunny/my/a/b/index.vue
new file mode 100644
index 0000000..156fd64
--- /dev/null
+++ b/src/views/bunny/my/a/b/index.vue
@@ -0,0 +1,3 @@
+<template>B的路由</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss"></style>
diff --git a/src/views/bunny/my/a/index.vue b/src/views/bunny/my/a/index.vue
new file mode 100644
index 0000000..006e89e
--- /dev/null
+++ b/src/views/bunny/my/a/index.vue
@@ -0,0 +1,10 @@
+<template>
+	A的路由45465456456
+	<AChildren />
+	<RouterView />
+</template>
+
+<script setup lang="ts">
+import AChildren from './aChildren.vue';
+</script>
+<style scoped lang="scss"></style>
diff --git a/src/views/bunny/my/index.vue b/src/views/bunny/my/index.vue
index 2fdb88b..66a86bb 100644
--- a/src/views/bunny/my/index.vue
+++ b/src/views/bunny/my/index.vue
@@ -1,6 +1,6 @@
 <template>
-	<h1>bunny/my 页面</h1>
 	<RouterView />
+	<h1>bunny/my 页面</h1>
 </template>
 
 <script setup lang="ts"></script>
diff --git a/src/views/bunny/my/page.ts b/src/views/bunny/my/page.ts
new file mode 100644
index 0000000..578195d
--- /dev/null
+++ b/src/views/bunny/my/page.ts
@@ -0,0 +1,10 @@
+const route = {
+	meta: { isFullScreen: true },
+	children: [
+		{ name: 'bunny_my_a', path: '/bunny/my/a', component: () => import('@/views/bunny/www/index.vue') },
+		{ name: 'bunny_my_a111', path: '/bunny/my/a/children', component: () => import('@/views/bunny/my/a/aChildren.vue') },
+		{ name: 'bunny_my_a_b', path: '/bunny/my/a/b', component: () => import('@/views/bunny/my/a/b/index.vue') },
+	],
+};
+
+export default route;
diff --git a/src/views/home/common/about/page.ts b/src/views/home/common/about/page.js
similarity index 100%
rename from src/views/home/common/about/page.ts
rename to src/views/home/common/about/page.js
diff --git a/src/views/layout.vue b/src/views/layout.vue
index 864cda3..a33779f 100644
--- a/src/views/layout.vue
+++ b/src/views/layout.vue
@@ -1,5 +1,5 @@
 <template>
-	<h1>vue-pinia 模板</h1>
+	<h1>vite-pinia 模板</h1>
 	<h1>成功</h1>
 	<ul>
 		<li v-for="(route, index) in pageRoutes" :key="index">
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index c73f66e..64f3bdd 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -12,3 +12,5 @@ declare module '*.vue' {
 	const component: DefineComponent<{}, {}, any>;
 	export default component;
 }
+
+declare module 'lodash';