Merge pull request 'fix: 🧩 自动路由添加到子路由模板' (#2) from dev into master

Reviewed-on: #2
2024-05-08 16:04:17 +08:00 · 2024-05-08 16:04:17 +08:00 · 83803e72f9
parent 268a0375a8 45e2dc6cd5
commit 83803e72f9
8 changed files with 99 additions and 52 deletions
--- a/.stylelintrc.js
+++ b/.stylelintrc.js
@ -2,61 +2,61 @@

 module.exports = {
 	root: true,
-	defaultSeverity: "error",
-	plugins: ["stylelint-order", "stylelint-less"],
+	defaultSeverity: 'error',
+	plugins: ['stylelint-order', 'stylelint-scss'],
 	/* 继承某些已有的规则 */
 	extends: [
-		"stylelint-config-standard", // 配置stylelint拓展插件
-		"stylelint-config-html/html", // the shareable html config for Stylelint.
-		"stylelint-config-html/vue", // 配置 vue 中 template 样式格式化
-		"stylelint-config-recess-order", // 配置stylelint css属性书写顺序插件,
-		"stylelint-config-prettier" // 配置stylelint和prettier兼容
+		'stylelint-config-standard', // 配置stylelint拓展插件
+		'stylelint-config-html/html', // the shareable html config for Stylelint.
+		'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
+		'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
+		'stylelint-config-prettier', // 配置stylelint和prettier兼容
 	],
 	overrides: [
 		// 扫描 .vue/html 文件中的<style>标签内的样式
 		{
-			files: ["**/*.{vue,html}"],
-			customSyntax: "postcss-html",
+			files: ['**/*.{vue,html}'],
+			customSyntax: 'postcss-html',
 			rules: {
 				// 禁止未知的伪类选择器
-				"selector-pseudo-class-no-unknown": [true, { ignorePseudoClasses: ["deep", "global"] }],
+				'selector-pseudo-class-no-unknown': [true, { ignorePseudoClasses: ['deep', 'global'] }],
 				// 禁止未知的伪元素选择器
-				"selector-pseudo-element-no-unknown": [true, { ignorePseudoElements: ["v-deep", "v-global", "v-slotted"] }]
-			}
+				'selector-pseudo-element-no-unknown': [true, { ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'] }],
+			},
 		},
 		{
-			files: ["*.less", "**/*.less"],
-			customSyntax: "postcss-less",
+			files: ['*.less', '**/*.less', '*.scss', '**/*.scss'],
+			customSyntax: 'postcss-less',
 			rules: {
-				"less/color-no-invalid-hex": true,
-				"less/no-duplicate-variables": true
-			}
-		}
+				'less/color-no-invalid-hex': true,
+				'less/no-duplicate-variables': true,
+			},
+		},
 	],
 	/**
 	 * null  => 关闭该规则
 	 */
 	rules: {
-		"value-keyword-case": null, // 在 css 中使用 v-bind，不报错
-		"no-descending-specificity": null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
-		"function-url-quotes": "always", // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
-		"string-quotes": "double", // 指定字符串使用单引号或双引号
-		"unit-case": null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
-		"color-hex-case": "lower", // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)"
-		"color-hex-length": "long", // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
-		"rule-empty-line-before": "never", // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
-		"font-family-no-missing-generic-family-keyword": null, // 禁止在字体族名称列表中缺少通用字体族关键字
-		"block-opening-brace-space-before": "always", // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
-		"property-no-unknown": null, // 禁止未知的属性(true 为不允许)
-		"no-empty-source": null, // 禁止空源码
-		"declaration-block-trailing-semicolon": null, // 要求或不允许在声明块中使用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
-		"selector-class-pattern": null, // 强制选择器类名的格式
-		"value-no-vendor-prefix": null, // 关闭 vendor-prefix(为了解决多行省略 -webkit-box)
-		"selector-pseudo-class-no-unknown": [
+		'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
+		'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
+		'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
+		'string-quotes': 'double', // 指定字符串使用单引号或双引号
+		'unit-case': null, // 指定单位的大小写 "lower(全小写)"|"upper(全大写)"
+		'color-hex-case': 'lower', // 指定 16 进制颜色的大小写 "lower(全小写)"|"upper(全大写)"
+		'color-hex-length': 'long', // 指定 16 进制颜色的简写或扩写 "short(16进制简写)"|"long(16进制扩写)"
+		'rule-empty-line-before': 'never', // 要求或禁止在规则之前的空行 "always(规则之前必须始终有一个空行)"|"never(规则前绝不能有空行)"|"always-multi-line(多行规则之前必须始终有一个空行)"|"never-multi-line(多行规则之前绝不能有空行。)"
+		'font-family-no-missing-generic-family-keyword': null, // 禁止在字体族名称列表中缺少通用字体族关键字
+		'block-opening-brace-space-before': 'always', // 要求在块的开大括号之前必须有一个空格或不能有空白符 "always(大括号前必须始终有一个空格)"|"never(左大括号之前绝不能有空格)"|"always-single-line(在单行块中的左大括号之前必须始终有一个空格)"|"never-single-line(在单行块中的左大括号之前绝不能有空格)"|"always-multi-line(在多行块中，左大括号之前必须始终有一个空格)"|"never-multi-line(多行块中的左大括号之前绝不能有空格)"
+		'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
+		'no-empty-source': null, // 禁止空源码
+		'declaration-block-trailing-semicolon': null, // 要求或不允许在声明块中使用尾随分号 string："always(必须始终有一个尾随分号)"|"never(不得有尾随分号)"
+		'selector-class-pattern': null, // 强制选择器类名的格式
+		'value-no-vendor-prefix': null, // 关闭 vendor-prefix(为了解决多行省略 -webkit-box)
+		'selector-pseudo-class-no-unknown': [
 			true,
 			{
-				ignorePseudoClasses: ["global", "v-deep", "deep"]
-			}
-		]
-	}
+				ignorePseudoClasses: ['global', 'v-deep', 'deep'],
+			},
+		],
+	},
 };
--- a/lint-staged.config.js
+++ b/lint-staged.config.js
@ -2,7 +2,7 @@ module.exports = {
 	'*.{js,jsx,ts,tsx}': ['eslint --fix --no-ignore', 'prettier --write'],
 	'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
 	'package.json': ['prettier --write'],
-	'*.vue': ['eslint --fix --no-ignore', 'prettier --write', 'stylelint --fix'],
-	'*.{scss,less,styl,html}': ['stylelint --fix --no-ignore', 'prettier --write'],
+	'*.vue': ['eslint --fix --no-ignore', 'prettier --write'],
+	'*.{scss,less,styl,html}': ['prettier --write', 'eslint --fix --no-ignore'], // 'stylelint --fix',
 	'*.md': ['prettier --write'],
 };
--- a/package-lock.json
+++ b/package-lock.json
@ -20,6 +20,7 @@
 				"mitt": "^3.0.1",
 				"moment": "^2.30.1",
 				"pinia": "^2.1.7",
+				"stylelint-scss": "^6.3.0",
 				"uuid": "^9.0.1",
 				"vue": "^3.4.21",
 				"vue-cookies": "^1.8.3",
@ -6925,7 +6926,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/cssesc/-/cssesc-3.0.0.tgz",
 			"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-			"dev": true,
 			"bin": {
 				"cssesc": "bin/cssesc"
 			},
@ -10062,6 +10062,11 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/known-css-properties": {
+			"version": "0.30.0",
+			"resolved": "https://registry.npmmirror.com/known-css-properties/-/known-css-properties-0.30.0.tgz",
+			"integrity": "sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ=="
+		},
 		"node_modules/launch-editor": {
 			"version": "2.6.1",
 			"resolved": "https://registry.npmmirror.com/launch-editor/-/launch-editor-2.6.1.tgz",
@ -12064,6 +12069,11 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/postcss-media-query-parser": {
+			"version": "0.2.3",
+			"resolved": "https://registry.npmmirror.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+			"integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig=="
+		},
 		"node_modules/postcss-merge-longhand": {
 			"version": "5.1.7",
 			"resolved": "https://registry.npmmirror.com/postcss-merge-longhand/-/postcss-merge-longhand-5.1.7.tgz",
@ -12402,6 +12412,11 @@
 				"postcss": "^8.2.15"
 			}
 		},
+		"node_modules/postcss-resolve-nested-selector": {
+			"version": "0.1.1",
+			"resolved": "https://registry.npmmirror.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
+			"integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw=="
+		},
 		"node_modules/postcss-safe-parser": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmmirror.com/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
@ -12422,7 +12437,6 @@
 			"version": "6.0.16",
 			"resolved": "https://registry.npmmirror.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
 			"integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
-			"dev": true,
 			"dependencies": {
 				"cssesc": "^3.0.0",
 				"util-deprecate": "^1.0.2"
@ -12465,8 +12479,7 @@
 		"node_modules/postcss-value-parser": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmmirror.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-			"dev": true
+			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
 		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
@ -14166,6 +14179,24 @@
 				"postcss": "^8.2.15"
 			}
 		},
+		"node_modules/stylelint-scss": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmmirror.com/stylelint-scss/-/stylelint-scss-6.3.0.tgz",
+			"integrity": "sha512-8OSpiuf1xC7f8kllJsBOFAOYp/mR/C1FXMVeOFjtJPw+AFvEmC93FaklHt7MlOqU4poxuQ1TkYMyfI0V+1SxjA==",
+			"dependencies": {
+				"known-css-properties": "^0.30.0",
+				"postcss-media-query-parser": "^0.2.3",
+				"postcss-resolve-nested-selector": "^0.1.1",
+				"postcss-selector-parser": "^6.0.15",
+				"postcss-value-parser": "^4.2.0"
+			},
+			"engines": {
+				"node": ">=18.12.0"
+			},
+			"peerDependencies": {
+				"stylelint": "^16.0.2"
+			}
+		},
 		"node_modules/supports-color": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
@ -14797,8 +14828,7 @@
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
-			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-			"dev": true
+			"integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
 		},
 		"node_modules/utila": {
 			"version": "0.4.0",
--- a/package.json
+++ b/package.json
@ -32,6 +32,7 @@
 		"mitt": "^3.0.1",
 		"moment": "^2.30.1",
 		"pinia": "^2.1.7",
+		"stylelint-scss": "^6.3.0",
 		"uuid": "^9.0.1",
 		"vue": "^3.4.21",
 		"vue-cookies": "^1.8.3",
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -1,6 +1,9 @@
 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
@ -8,8 +11,10 @@ import { pageRoutes } from './module/pageRoutes';
 */
 const router = createRouter({
 	history:
-		process.env.NODE_ENV === 'production' ? createWebHashHistory(import.meta.env.BASE_URL) : createWebHistory(import.meta.env.BASE_URL),
-	routes: [...pageRoutes, ...statisticRoutes],
+		process.env.NODE_ENV === 'production'
+			? createWebHashHistory(import.meta.env.BASE_URL)
+			: createWebHistory(import.meta.env.BASE_URL),
+	routes: [/* ...pageRoutes, */ ...statisticRoutes],
 });

 export default router;
--- a/src/router/module/pageRoutes.ts
+++ b/src/router/module/pageRoutes.ts
@ -1,5 +1,6 @@
 import { routeFilenameHelper } from '@/utils/file/routeFileUtil';
 import { RouteRecordRaw } from 'vue-router';
+import router from '..';

 // * 最终路由
 const routeMap: Record<string, RouteRecordRaw> = {};
@ -41,3 +42,13 @@ 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);
+});
--- a/src/router/module/statisticRoutes.ts
+++ b/src/router/module/statisticRoutes.ts
@ -1,5 +1,5 @@
 export const statisticRoutes = [
-	{ name: 'index', path: '/', component: () => import('@/views/layout.vue') },
+	{ name: 'layout', path: '/', component: () => import('@/views/layout.vue') },
 	{
 		path: '/403',
 		name: '403',
--- a/src/views/layout.vue
+++ b/src/views/layout.vue
@ -6,6 +6,8 @@
 			<RouterLink :to="route.path">{{ `${route.path}【${String(route.name)}】` }}</RouterLink>
 		</li>
 	</ul>
+
+	<RouterView />
 </template>

 <script lang="ts" setup>
@ -14,11 +16,9 @@ import { pageRoutes } from '@/router/module/pageRoutes';
 <style scoped lang="scss">
 ul {
 	padding-left: 50px;
-
 	li {
 		list-style: circle !important;
 	}
-
 	a {
 		color: #8185a7;
 	}