From 45e2dc6cd5f0a56129e4eea140e8d31a0da0ffd5 Mon Sep 17 00:00:00 2001
From: bunny <1319900154@qq.com>
Date: Wed, 8 May 2024 16:02:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=A7=A9=20=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=B7=BB=E5=8A=A0=E5=88=B0=E5=AD=90=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylelintrc.js                      | 76 ++++++++++++++--------------
 lint-staged.config.js                |  4 +-
 package-lock.json                    | 42 ++++++++++++---
 package.json                         |  1 +
 src/router/index.ts                  | 11 ++--
 src/router/module/pageRoutes.ts      | 11 ++++
 src/router/module/statisticRoutes.ts |  2 +-
 src/views/layout.vue                 |  4 +-
 8 files changed, 99 insertions(+), 52 deletions(-)

diff --git a/.stylelintrc.js b/.stylelintrc.js
index f0a90f8..180c265 100644
--- 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'],
+			},
+		],
+	},
 };
diff --git a/lint-staged.config.js b/lint-staged.config.js
index fa5ceae..1f21144 100644
--- 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'],
 };
diff --git a/package-lock.json b/package-lock.json
index 4bfb253..f287037 100644
--- 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",
diff --git a/package.json b/package.json
index ac2fb85..825654b 100644
--- 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",
diff --git a/src/router/index.ts b/src/router/index.ts
index 07f8af1..9fb5e45 100644
--- 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;
diff --git a/src/router/module/pageRoutes.ts b/src/router/module/pageRoutes.ts
index 4246127..56db99e 100644
--- 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);
+});
diff --git a/src/router/module/statisticRoutes.ts b/src/router/module/statisticRoutes.ts
index 52459aa..baa02db 100644
--- 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',
diff --git a/src/views/layout.vue b/src/views/layout.vue
index 05f320e..864cda3 100644
--- 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;
 	}