page: 新增页面: 📄 头部布局完成

components.d.ts

@@ -11,8 +11,16 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElHeader: typeof import('element-plus/es')['ElHeader']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElText: typeof import('element-plus/es')['ElText']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

package-lock.json

@@ -14,6 +14,7 @@
 				"element-plus": "^2.5.5",
 				"loadsh": "^0.0.4",
 				"pinia": "^2.1.7",
+				"unplugin-element-plus": "^0.8.0",
 				"uuid": "^9.0.1",
 				"vue": "^3.4.19",
 				"vue-cookies": "^1.8.3",
@@ -3088,7 +3089,6 @@
 			"version": "5.1.0",
 			"resolved": "https://registry.npmmirror.com/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
 			"integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^2.0.2",
@@ -3285,8 +3285,7 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.5.tgz",
-			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
-			"dev": true
 		},
 		"node_modules/@types/express": {
 			"version": "4.17.21",
@@ -4721,7 +4720,6 @@
 			"version": "8.11.3",
 			"resolved": "https://registry.npmmirror.com/acorn/-/acorn-8.11.3.tgz",
 			"integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -4894,7 +4892,6 @@
 			"version": "3.1.3",
 			"resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz",
 			"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-			"dev": true,
 			"dependencies": {
 				"normalize-path": "^3.0.0",
 				"picomatch": "^2.0.4"
@@ -5130,7 +5127,6 @@
 			"version": "2.2.0",
 			"resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
 			"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-			"dev": true,
 			"engines": {
 				"node": ">=8"
 			}
@@ -5232,7 +5228,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
 			"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-			"dev": true,
 			"dependencies": {
 				"fill-range": "^7.0.1"
 			},
@@ -5408,7 +5403,6 @@
 			"version": "3.5.3",
 			"resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
 			"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-			"dev": true,
 			"dependencies": {
 				"anymatch": "~3.1.2",
 				"braces": "~3.0.2",
@@ -5429,7 +5423,6 @@
 			"version": "5.1.2",
 			"resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
 			"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-			"dev": true,
 			"dependencies": {
 				"is-glob": "^4.0.1"
 			},
@@ -6961,8 +6954,7 @@
 		"node_modules/es-module-lexer": {
 			"version": "1.4.1",
 			"resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.4.1.tgz",
-			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==",
+			"integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w=="
-			"dev": true
 		},
 		"node_modules/escalade": {
 			"version": "3.1.1",
@@ -7881,7 +7873,6 @@
 			"version": "7.0.1",
 			"resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
 			"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-			"dev": true,
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
 			},
@@ -8243,7 +8234,6 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"optional": true,
 			"os": [
@@ -9168,7 +9158,6 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
 			"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-			"dev": true,
 			"dependencies": {
 				"binary-extensions": "^2.0.0"
 			},
@@ -9213,7 +9202,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
 			"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -9239,7 +9227,6 @@
 			"version": "4.0.3",
 			"resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
 			"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-			"dev": true,
 			"dependencies": {
 				"is-extglob": "^2.1.1"
 			},
@@ -9260,7 +9247,6 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
 			"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.12.0"
 			}
@@ -10958,7 +10944,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
 			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-			"dev": true,
 			"engines": {
 				"node": ">=0.10.0"
 			}
@@ -11443,7 +11428,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
 			"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-			"dev": true,
 			"engines": {
 				"node": ">=8.6"
 			}
@@ -12474,7 +12458,6 @@
 			"version": "3.6.0",
 			"resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
 			"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-			"dev": true,
 			"dependencies": {
 				"picomatch": "^2.2.1"
 			},
@@ -13996,7 +13979,6 @@
 			"version": "5.0.1",
 			"resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
 			"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-			"dev": true,
 			"dependencies": {
 				"is-number": "^7.0.0"
 			},
@@ -14350,7 +14332,6 @@
 			"version": "1.7.1",
 			"resolved": "https://registry.npmmirror.com/unplugin/-/unplugin-1.7.1.tgz",
 			"integrity": "sha512-JqzORDAPxxs8ErLV4x+LL7bk5pk3YlcWqpSNsIkAZj972KzFZLClc/ekppahKkOczGkwIG6ElFgdOgOlK4tXZw==",
-			"dev": true,
 			"dependencies": {
 				"acorn": "^8.11.3",
 				"chokidar": "^3.5.3",
@@ -14410,6 +14391,20 @@
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
+		"node_modules/unplugin-element-plus": {
+			"version": "0.8.0",
+			"resolved": "https://registry.npmmirror.com/unplugin-element-plus/-/unplugin-element-plus-0.8.0.tgz",
+			"integrity": "sha512-jByUGY3FG2B8RJKFryqxx4eNtSTj+Hjlo8edcOdJymewndDQjThZ1pRUQHRjQsbKhTV2jEctJV7t7RJ405UL4g==",
+			"dependencies": {
+				"@rollup/pluginutils": "^5.0.2",
+				"es-module-lexer": "^1.3.0",
+				"magic-string": "^0.30.1",
+				"unplugin": "^1.3.2"
+			},
+			"engines": {
+				"node": ">=14.19.0"
+			}
+		},
 		"node_modules/unplugin-vue-components": {
 			"version": "0.25.2",
 			"resolved": "https://registry.npmmirror.com/unplugin-vue-components/-/unplugin-vue-components-0.25.2.tgz",
@@ -14477,8 +14472,7 @@
 		"node_modules/unplugin/node_modules/webpack-virtual-modules": {
 			"version": "0.6.1",
 			"resolved": "https://registry.npmmirror.com/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
-			"integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==",
+			"integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
-			"dev": true
 		},
 		"node_modules/update-browserslist-db": {
 			"version": "1.0.13",
@@ -15181,7 +15175,6 @@
 			"version": "3.2.3",
 			"resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
 			"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
-			"dev": true,
 			"engines": {
 				"node": ">=10.13.0"
 			}

package.json

@@ -1,70 +1,71 @@
 {
-	"name": "vue_ts_pina",
+  "name": "sky-admin",
-	"version": "0.1.0",
+  "version": "0.1.0",
-	"private": true,
+  "private": true,
-	"scripts": {
+  "scripts": {
-		"start": "vue-cli-service serve",
+    "start": "vue-cli-service serve",
-		"build": "vue-cli-service build",
+    "build": "vue-cli-service build",
-		"lint": "vue-cli-service lint",
+    "lint": "vue-cli-service lint",
-		"lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
+    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
-		"lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
-		"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
-		"lint:lint-staged": "lint-staged",
+    "lint:lint-staged": "lint-staged",
-		"prepare": "husky install",
+    "prepare": "husky install",
-		"release": "standard-version",
+    "release": "standard-version",
-		"commit": "git status && git add -A && git-cz"
+    "commit": "git status && git add -A && git-cz"
-	},
+  },
-	"dependencies": {
+  "dependencies": {
-		"axios": "^1.6.2",
+    "axios": "^1.6.2",
-		"core-js": "^3.8.3",
+    "core-js": "^3.8.3",
-		"dayjs": "^1.11.10",
+    "dayjs": "^1.11.10",
-		"element-plus": "^2.5.5",
+    "element-plus": "^2.5.5",
-		"loadsh": "^0.0.4",
+    "loadsh": "^0.0.4",
-		"pinia": "^2.1.7",
+    "pinia": "^2.1.7",
-		"uuid": "^9.0.1",
+    "unplugin-element-plus": "^0.8.0",
-		"vue": "^3.4.19",
+    "uuid": "^9.0.1",
-		"vue-cookies": "^1.8.3",
+    "vue": "^3.4.19",
-		"vue-lazyload": "^3.0.0",
+    "vue-cookies": "^1.8.3",
-		"vue-router": "^4.0.3",
+    "vue-lazyload": "^3.0.0",
-		"webpackbar": "^6.0.0"
+    "vue-router": "^4.0.3",
-	},
+    "webpackbar": "^6.0.0"
-	"devDependencies": {
+  },
-		"@commitlint/cli": "^18.4.3",
+  "devDependencies": {
-		"@commitlint/config-conventional": "^18.4.3",
+    "@commitlint/cli": "^18.4.3",
-		"@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@commitlint/config-conventional": "^18.4.3",
-		"@typescript-eslint/parser": "^5.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
-		"@vue/cli-plugin-babel": "~5.0.0",
+    "@typescript-eslint/parser": "^5.4.0",
-		"@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
-		"@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
-		"@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
-		"@vue/cli-service": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
-		"@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/cli-service": "~5.0.0",
-		"commitizen": "^4.3.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
-		"cz-git": "^1.8.0",
+    "commitizen": "^4.3.0",
-		"eslint": "^7.32.0",
+    "cz-git": "^1.8.0",
-		"eslint-config-prettier": "^8.3.0",
+    "eslint": "^7.32.0",
-		"eslint-plugin-prettier": "^4.0.0",
+    "eslint-config-prettier": "^8.3.0",
-		"eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-prettier": "^4.0.0",
-		"husky": "^8.0.3",
+    "eslint-plugin-vue": "^8.0.3",
-		"lint-staged": "^11.2.6",
+    "husky": "^8.0.3",
-		"postcss": "^8.4.32",
+    "lint-staged": "^11.2.6",
-		"postcss-html": "^1.5.0",
+    "postcss": "^8.4.32",
-		"prettier": "^2.4.1",
+    "postcss-html": "^1.5.0",
-		"sass": "^1.32.7",
+    "prettier": "^2.4.1",
-		"sass-loader": "^12.0.0",
+    "sass": "^1.32.7",
-		"stylelint": "^14.16.1",
+    "sass-loader": "^12.0.0",
-		"stylelint-config-html": "^1.1.0",
+    "stylelint": "^14.16.1",
-		"stylelint-config-prettier": "^9.0.5",
+    "stylelint-config-html": "^1.1.0",
-		"typescript": "~4.5.5",
+    "stylelint-config-prettier": "^9.0.5",
-		"unplugin-auto-import": "^0.16.6",
+    "typescript": "~4.5.5",
-		"unplugin-vue-components": "^0.25.2"
+    "unplugin-auto-import": "^0.16.6",
-	},
+    "unplugin-vue-components": "^0.25.2"
-	"gitHooks": {
+  },
-		"pre-commit": "lint-staged"
+  "gitHooks": {
-	},
+    "pre-commit": "lint-staged"
-	"config": {
+  },
-		"commitizen": {
+  "config": {
-			"path": "node_modules/cz-git"
+    "commitizen": {
-		}
+      "path": "node_modules/cz-git"
-	}
+    }
+  }
 }

public/index.html

@@ -1,17 +1,19 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
+<head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta content="IE=edge" http-equiv="X-UA-Compatible">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta content="width=device-width,initial-scale=1.0" name="viewport">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="<%= BASE_URL %>favicon.ico" rel="icon">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>苍穹外卖</title>
-  </head>
+</head>
-  <body>
+<body>
-    <noscript>
+<noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
-    </noscript>
+        Please enable
-    <div id="app"></div>
+        it to continue.</strong>
-    <!-- built files will be auto injected -->
+</noscript>
-  </body>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>

src/assets/css/reset.css

@@ -10,12 +10,14 @@
 	height: 8px;
 	background-color: #f5f5f5;
 }
+
 /*定义滚动条轨道内阴影+圆角*/
 ::-webkit-scrollbar-track {
 	-webkit-box-shadow: inset 0 0 6px #ccc;
 	border-radius: 5px;
 	background-color: #f5f5f5;
 }
+
 /*定义滑块内阴影+圆角*/
 ::-webkit-scrollbar-thumb {
 	border-radius: 5px;
@@ -23,38 +25,111 @@
 	background-color: #ccc;
 }
 
-html,body{height:100%;}
+html, body {
-html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
+	height: 100%;
-header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
+}
-table{border-collapse:collapse;border-spacing:0;}
+
-caption,th{text-align:left;font-weight:normal;}
+html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
-html,body,fieldset,img,iframe,abbr{border:0;}
+	margin: 0;
-i,cite,em,var,address,dfn{font-style:normal;}
+	padding: 0;
-[hidefocus],summary{outline:0;}
+}
-li{list-style:none;}
+
-h1,h2,h3,h4,h5,h6,small{font-size:100%;}
+header, footer, section, article, aside, nav, hgroup, address, figure, figcaption, menu, details {
-sup,sub{font-size:83%;}
+	display: block;
-pre,code,kbd,samp{font-family:inherit;}
+}
-q:before,q:after{content:none;}
+
-textarea{overflow:auto;resize:none;}
+table {
-label,summary{cursor:default;}
+	border-collapse: collapse;
-a,button{cursor:pointer;}
+	border-spacing: 0;
-h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
+}
-del,ins,u,s,a,a:hover{text-decoration:none;}
+
-body,textarea,input,button,select,keygen,legend{font: Microsoft YaHei,arial,\5b8b\4f53;color:#333;outline:0;}
+caption, th {
-body{background:#fff;}
+	text-align: left;
-a,a:hover{color:#333;}
+	font-weight: normal;
-*{box-sizing: border-box;}
+}
+
+html, body, fieldset, img, iframe, abbr {
+	border: 0;
+}
+
+i, cite, em, var, address, dfn {
+	font-style: normal;
+}
+
+[hidefocus], summary {
+	outline: 0;
+}
+
+li {
+	list-style: none;
+}
+
+h1, h2, h3, h4, h5, h6, small {
+	font-size: 100%;
+}
+
+sup, sub {
+	font-size: 83%;
+}
+
+pre, code, kbd, samp {
+	font-family: inherit;
+}
+
+q:before, q:after {
+	content: none;
+}
+
+textarea {
+	overflow: auto;
+	resize: none;
+}
+
+label, summary {
+	cursor: default;
+}
+
+a, button {
+	cursor: pointer;
+}
+
+h1, h2, h3, h4, h5, h6, em, strong, b {
+	font-weight: bold;
+}
+
+del, ins, u, s, a, a:hover {
+	text-decoration: none;
+}
+
+body, textarea, input, button, select, keygen, legend {
+	font-size: 14px;
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+	color: #333;
+	outline: 0;
+}
+
+body {
+	background: #fff;
+}
+
+a, a:hover {
+	color: #333;
+}
+
+* {
+	box-sizing: border-box;
+}
 
 /* 去除input默认填充的背景颜色 */
 input:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0px 1000px white inset;
+	-webkit-box-shadow: 0 0 0px 1000px white inset;
 }
 
 /* 清除input[type=number]的默认样式 */
 input[type=number] {
-	-moz-appearance:textfield;
+	-moz-appearance: textfield;
 }
+
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
 	-webkit-appearance: none;
@@ -62,21 +137,21 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 /* 清除移动端 a 标签等点击区域变色 */
-*{
+* {
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
 /* 清除移动端 input 样式 */
-input{
+input {
 	border: none;
-	-moz-appearance:none;
+	-moz-appearance: none;
-	-webkit-appearance : none ; /*解决ios上按钮的圆角问题*/
+	-webkit-appearance: none; /*解决ios上按钮的圆角问题*/
 	border-radius: 0; /*解决ios上输入框圆角问题*/
-	outline:medium; /*去掉鼠标点击的默认黄色边框*/
+	outline: medium; /*去掉鼠标点击的默认黄色边框*/
 	background-color: transparent;
 }
 
 /* 避免ios滑动滚动条卡顿 */
-*{
+* {
-  -webkit-overflow-scrolling : touch
+	-webkit-overflow-scrolling: touch
 }

src/commpent/aside.vue

@@ -0,0 +1,75 @@
+<template>
+	<el-menu :collapse="store.isCollapse">
+		<div :style="!store.isCollapse ? 'width: 100%' : 'width: 63px'" class="logo">
+			<img v-show="!store.isCollapse" alt="图标" src="../assets/login/logo.png" srcset="../assets/login/logo.png" />
+			<img v-show="store.isCollapse" alt="图标" src="../assets/login/mini-logo.png" srcset="../assets/login/mini-logo.png" />
+		</div>
+		<el-menu-item v-for="(item, index) in menuData" :key="index" :index="(index + 1).toString()">
+			<el-icon>
+				<component :is="item.icon" />
+			</el-icon>
+			<template #title> {{ item.label }}</template>
+		</el-menu-item>
+	</el-menu>
+</template>
+
+<script lang="ts" setup>
+import { headerStore } from '@/store/header';
+
+const store = headerStore();
+
+const menuData = [
+	{
+		path: '/',
+		name: 'home',
+		label: '首页',
+		icon: 'Menu',
+		url: 'Home/Home',
+	},
+	{
+		path: '/mall',
+		name: 'mall',
+		label: '商品管理',
+		icon: 'Document',
+		url: 'MallManage/MallManage',
+	},
+	{
+		path: '/user',
+		name: 'user',
+		label: '用户管理',
+		icon: 'Setting',
+		url: 'UserManage/UserManage',
+	},
+	{
+		label: '其他',
+		icon: 'location',
+	},
+];
+</script>
+
+<style lang="scss" scoped>
+// 图标
+.logo {
+	float: left;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 62px;
+	background-color: var(--el-color-primary);
+
+	img {
+		height: 31px;
+	}
+}
+
+.el-menu {
+	max-width: 200px;
+	min-width: 63px;
+	height: 100%;
+	background: #343744;
+
+	.el-menu-item {
+		color: #bfcbd9;
+	}
+}
+</style>

src/commpent/header/index.vue

@@ -0,0 +1,127 @@
+<template>
+	<SetShopStatus />
+	<SetPassword />
+	<header>
+		<!--状态操作-->
+		<div class="statusBox">
+			<div class="collapse">
+				<span @click="store.isCollapse = !store.isCollapse">
+					<el-icon size="20">
+						<Fold v-show="!store.isCollapse" />
+						<Expand v-show="store.isCollapse" />
+					</el-icon>
+				</span>
+			</div>
+			<!-- 店铺状态 -->
+			<div :style="store.shopStatus === 1 ? 'background:#fd3333' : 'background:#6A6A6A'" class="status">
+				<span>{{ store.shopStatus === 1 ? '营业中' : '打样中' }}</span>
+			</div>
+		</div>
+
+		<div class="rightStatus">
+			<div class="operatingState" @click="store.changeShopStatus = true">
+				<el-icon>
+					<Timer />
+				</el-icon>
+				营业状态设置
+			</div>
+
+			<el-dropdown>
+				<span class="el-dropdown-link">
+					<el-button plain style="width: 120px" type="warning">
+						管理员 <el-icon class="el-icon--right"><CaretBottom /></el-icon>
+					</el-button>
+				</span>
+				<template #dropdown>
+					<el-dropdown-menu>
+						<el-dropdown-item command="a" style="color: #1f1f1f" @click="handelPassword">
+							<span style="margin: 0 10px 0 0">修改密码</span>
+							<el-icon>
+								<Lock />
+							</el-icon>
+						</el-dropdown-item>
+						<el-dropdown-item command="b" style="color: #1f1f1f" @click="$router.push('/login')">
+							<span style="margin: 0 10px 0 0">退出登录</span>
+							<el-icon>
+								<SwitchButton />
+							</el-icon>
+						</el-dropdown-item>
+					</el-dropdown-menu>
+				</template>
+			</el-dropdown>
+		</div>
+	</header>
+</template>
+
+<script lang="ts" setup>
+import { CaretBottom, Expand, Fold, Lock, SwitchButton, Timer } from '@element-plus/icons-vue';
+import SetShopStatus from '@/commpent/header/set-shop-status.vue';
+import { headerStore } from '@/store/header';
+import SetPassword from '@/commpent/header/set-password.vue';
+
+const store = headerStore();
+
+/**
+ * 修改密码弹窗
+ */
+const handelPassword = () => {
+	console.log(666);
+	store.changePassword = true;
+};
+</script>
+
+<style lang="scss" scoped>
+header {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+	height: 62px;
+	background-color: var(--el-color-primary);
+}
+
+// 左边状态
+.statusBox {
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	width: 108px;
+	height: 62px;
+
+	.collapse {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		cursor: pointer;
+	}
+
+	.status {
+		margin: -3px 0 0 0;
+		padding: 0 6px;
+		height: 22px;
+		line-height: 20px;
+		border: 1px solid #fff;
+		border-radius: 4px;
+		font-size: 14px;
+		color: #fff;
+	}
+}
+
+// 右边状态
+.rightStatus {
+	display: flex;
+	align-items: center;
+	margin: 0 20px 0 0;
+
+	.operatingState {
+		padding: 0 6px;
+		margin: 0 20px 0 0;
+		height: 62px;
+		line-height: 62px;
+		cursor: pointer;
+
+		&:hover {
+			background-color: #ffe185;
+		}
+	}
+}
+</style>

src/commpent/header/set-password.vue

@@ -0,0 +1,52 @@
+<template>
+	<el-dialog
+		v-model="store.changePassword"
+		:close-on-click-modal="false"
+		:close-on-press-escape="false"
+		:show-close="false"
+		align-center
+		draggable
+		width="500"
+	>
+		<template #header>
+			<h3>修改密码</h3>
+		</template>
+		<el-form :label-position="labelPosition" :model="formLabelAlign" label-width="100px" style="max-width: 460px">
+			<el-form-item label="原始密码">
+				<el-input v-model="formLabelAlign.oldPassword" />
+			</el-form-item>
+			<el-form-item label="新密码">
+				<el-input v-model="formLabelAlign.newPassword" />
+			</el-form-item>
+			<el-form-item label="确认密码">
+				<el-input v-model="formLabelAlign.confirmPassword" />
+			</el-form-item>
+		</el-form>
+		<template #footer>
+			<div class="dialog-footer">
+				<el-button @click="store.changePassword = false">返回</el-button>
+				<el-button type="primary" @click="handelConfirmPassword"> 确认修改</el-button>
+			</div>
+		</template>
+	</el-dialog>
+</template>
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import type { FormProps } from 'element-plus';
+import { headerStore } from '@/store/header';
+
+const store = headerStore();
+const labelPosition = ref<FormProps['labelPosition']>('right');
+const formLabelAlign = reactive({
+	oldPassword: '',
+	newPassword: '',
+	confirmPassword: '',
+});
+
+/**
+ * 修改密码
+ */
+const handelConfirmPassword = () => {
+	store.changePassword = false;
+};
+</script>

src/commpent/header/set-shop-status.vue

@@ -0,0 +1,75 @@
+<template>
+	<el-dialog v-model="store.changeShopStatus" :before-close="closeSetShopStatus" width="360">
+		<template #header>
+			<h3>设置营业状态</h3>
+		</template>
+		<div class="shopStatus">
+			<!-- 营业中 -->
+			<div :class="{ active: radio === 1 }" class="shopStatusBox" @click="handelShopStatus(1)">
+				<el-radio v-model="radio" :label="1"><h3>营业中</h3></el-radio>
+				<p>当前餐厅处于打烊状态，仅接受营业时间内的预定订单，可点击营业中手动恢复营业状态。</p>
+			</div>
+			<!-- 打样中 -->
+			<div :class="{ active: radio === 0 }" class="shopStatusBox" @click="handelShopStatus(0)">
+				<el-radio v-model="radio" :label="0"><h3>打样中</h3></el-radio>
+				<p>当前餐厅处于营业状态，自动接收任何订单，可点击打烊进入店铺打烊状态。</p>
+			</div>
+		</div>
+
+		<template #footer>
+			<el-button @click="closeSetShopStatus">取消</el-button>
+			<el-button type="primary" @click="handelConfirmShopStatus">确认</el-button>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { headerStore } from '@/store/header';
+
+const store = headerStore();
+const radio = ref(1);
+
+/**
+ * 关闭弹窗
+ */
+const closeSetShopStatus = () => {
+	store.changeShopStatus = false;
+};
+
+/**
+ * 修改营业状态
+ * @param value 状态值
+ */
+const handelShopStatus = (value: number) => {
+	radio.value = value;
+};
+
+const handelConfirmShopStatus = () => {
+	alert('确认修改');
+	store.changeShopStatus = false;
+};
+</script>
+
+<style lang="scss" scoped>
+.active {
+	border: 1px solid var(--el-color-primary) !important;
+}
+
+.shopStatus {
+	display: flex;
+	justify-content: center;
+	flex-flow: column;
+
+	h3 {
+		color: #1f1f1f !important;
+	}
+
+	.shopStatusBox {
+		padding: 20px;
+		margin: 10px;
+		border: 1px solid #ccc;
+		cursor: pointer;
+	}
+}
+</style>

src/commpent/main.vue

@@ -0,0 +1,41 @@
+<template>
+	<el-row class="mb-4">
+		<el-button>Default</el-button>
+		<el-button type="primary">Primary</el-button>
+		<el-button type="success">Success</el-button>
+		<el-button type="info">Info</el-button>
+		<el-button type="warning">Warning</el-button>
+		<el-button type="danger">Danger</el-button>
+	</el-row>
+
+	<el-row class="mb-4">
+		<el-button plain>Plain</el-button>
+		<el-button plain type="primary">Primary</el-button>
+		<el-button plain type="success">Success</el-button>
+		<el-button plain type="info">Info</el-button>
+		<el-button plain type="warning">Warning</el-button>
+		<el-button plain type="danger">Danger</el-button>
+	</el-row>
+
+	<el-row class="mb-4">
+		<el-button round>Round</el-button>
+		<el-button round type="primary">Primary</el-button>
+		<el-button round type="success">Success</el-button>
+		<el-button round type="info">Info</el-button>
+		<el-button round type="warning">Warning</el-button>
+		<el-button round type="danger">Danger</el-button>
+	</el-row>
+
+	<el-row>
+		<el-button :icon="Search" circle />
+		<el-button :icon="Edit" circle type="primary" />
+		<el-button :icon="Check" circle type="success" />
+		<el-button :icon="Message" circle type="info" />
+		<el-button :icon="Star" circle type="warning" />
+		<el-button :icon="Delete" circle type="danger" />
+	</el-row>
+</template>
+
+<script lang="ts" setup>
+import { Check, Delete, Edit, Message, Search, Star } from '@element-plus/icons-vue';
+</script>

src/main.ts

@@ -3,8 +3,14 @@ import App from './App.vue';
 import router from './router';
 import { createPinia } from 'pinia';
 import ElementPlus from 'element-plus';
-import 'element-plus/dist/index.css';
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
+import './assets/css/reset.css';
+import './assets/css/index.scss';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 
 const app = createApp(App);
 
-app.use(ElementPlus).use(router).use(createPinia()).mount('#app');
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+	app.component(key, component);
+}
+app.use(router).use(createPinia()).use(ElementPlus, { locale: zhCn }).mount('#app');

src/shims-vue.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+	import type {DefineComponent} from 'vue'
-  const component: DefineComponent<{}, {}, any>
+	const component: DefineComponent<{}, {}, any>
-  export default component
+	export default component
 }
+declare module 'element-plus/dist/locale/zh-cn.mjs';

src/store/header.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const headerStore = defineStore('headerStore', {
+	state: () => ({
+		isCollapse: false,
+		shopStatus: 1, // 1为营业，0为打烊
+		changeShopStatus: false,
+		changePassword: false, // 修改密码弹窗
+	}),
+	getters: {},
+	actions: {},
+});

src/store/test.ts

@@ -1,11 +0,0 @@
-import { defineStore } from 'pinia';
-
-export const testStore = defineStore('testStore', {
-	state: () => {
-		return {
-			count: 0,
-		};
-	},
-	getters: {},
-	actions: {},
-});

src/views/layout.vue

@@ -1,11 +1,33 @@
 <template>
 	<div class="common-layout">
 		<el-container>
-			<el-header>Header</el-header>
+			<!--侧边栏-->
+			<el-aside width="auto">
+				<Aside />
+			</el-aside>
 			<el-container>
-				<el-aside width="200px">Aside</el-aside>
+				<!--头部-->
-				<el-main>Main</el-main>
+				<el-header>
+					<Header />
+				</el-header>
+				<!--主体部分-->
+				<el-main>
+					<Main />
+				</el-main>
 			</el-container>
 		</el-container>
 	</div>
 </template>
+<script lang="ts" setup>
+import Header from '@/commpent/header/index.vue';
+import Aside from '@/commpent/aside.vue';
+import Main from '@/commpent/main.vue';
+</script>
+
+<style lang="scss" scoped>
+#app,
+.common-layout,
+.el-aside {
+	height: 100vh;
+}
+</style>

vue.config.js

@@ -2,6 +2,7 @@ const {defineConfig} = require('@vue/cli-service');
 const AutoImport = require('unplugin-auto-import/webpack');
 const Components = require('unplugin-vue-components/webpack');
 const {ElementPlusResolver} = require('unplugin-vue-components/resolvers');
+const ElementPlus = require('unplugin-element-plus/webpack')
 
 module.exports = defineConfig({
 	transpileDependencies: true,
@@ -16,13 +17,34 @@ module.exports = defineConfig({
 			},
 		},
 	},
+
+	chainWebpack: (config) => {
+		config.plugin('define').tap((definitions) => {
+			Object.assign(definitions[0], {
+				__VUE_OPTIONS_API__: 'true',
+				__VUE_PROD_DEVTOOLS__: 'false',
+				__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
+			})
+			return definitions
+		})
+	},
+	// css: {
+	// 	loaderOptions: {
+	// 		scss: {
+	// 			additionalData: `@use "~@/styles/index.scss" as *;`,
+	// 		},
+	// 	},
+	// },
 	configureWebpack: {
 		plugins: [
 			AutoImport({
 				resolvers: [ElementPlusResolver()],
 			}),
-			Components({
+			// Components({
-				resolvers: [ElementPlusResolver()],
+			// 	resolvers: [ElementPlusResolver()],
+			// }),
+			ElementPlus({
+				useSource: true,
 			}),
 		],
 	},