feat: Tab右键菜单中增加“关闭右侧标签页”和“关闭左侧标签页”

package-lock.json

@@ -73,6 +73,7 @@
         "vite-plugin-element-plus": "^0.0.11",
         "vite-plugin-mock": "^2.9.6",
         "vite-plugin-style-import": "^1.2.1",
+        "vite-svg-loader": "^2.2.0",
         "vue-eslint-parser": "^7.7.2"
       }
     },
@@ -792,6 +793,15 @@
       "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==",
       "dev": true
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
+      "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -1502,6 +1512,12 @@
       "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
       "dev": true
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1749,9 +1765,9 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "node_modules/colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npm.taobao.org/colorette/download/colorette-1.2.2.tgz?cache=0&sync_timestamp=1614259623635&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolorette%2Fdownload%2Fcolorette-1.2.2.tgz",
-      "integrity": "sha1-y8x51emcrqLb8Q6zom/Ys+as+pQ=",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
       "dev": true
     },
     "node_modules/commander": {
@@ -1893,6 +1909,47 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-select": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.0.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.6.0",
+        "nth-check": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
+    "node_modules/css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dev": true,
+      "dependencies": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+      "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.nlark.com/cssesc/download/cssesc-3.0.0.tgz",
@@ -1905,6 +1962,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "dependencies": {
+        "css-tree": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.17",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
@@ -1989,6 +2058,61 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ]
+    },
+    "node_modules/domhandler": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+      "dev": true,
+      "dependencies": {
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "dependencies": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
     "node_modules/dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -2096,6 +2220,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -3671,6 +3804,12 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "node_modules/mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
     "node_modules/merge-source-map": {
       "version": "1.1.0",
       "resolved": "https://registry.nlark.com/merge-source-map/download/merge-source-map-1.1.0.tgz",
@@ -3847,6 +3986,18 @@
       "resolved": "https://registry.npm.taobao.org/nprogress/download/nprogress-0.2.0.tgz",
       "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
     },
+    "node_modules/nth-check": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+      "dev": true,
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -4616,6 +4767,12 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "node_modules/stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
     "node_modules/statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -4715,6 +4872,27 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "node_modules/svgo": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.5.0.tgz",
+      "integrity": "sha512-FSdBOOo271VyF/qZnOn1PgwCdt1v4Dx0Sey+U1jgqm1vqRYjPGdip0RGrFW6ItwtkBB8rHgHk26dlVr0uCs82Q==",
+      "dev": true,
+      "dependencies": {
+        "@trysound/sax": "0.1.1",
+        "colorette": "^1.3.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "stable": "^0.1.8"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/table": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
@@ -5119,6 +5297,16 @@
         "node": ">= 8.0.0"
       }
     },
+    "node_modules/vite-svg-loader": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-2.2.0.tgz",
+      "integrity": "sha512-FP6qCN57coIOwmtah68ofpi4dewGmfzPcoKe76RMnJoz7qBTXxQVm2BlnH0YzGeCbOcjm9NKauJ1I6J9OlUUtg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "^3.0.11",
+        "svgo": "^2.3.0"
+      }
+    },
     "node_modules/vite/node_modules/esbuild": {
       "version": "0.12.22",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.12.22.tgz",
@@ -5940,6 +6128,12 @@
         }
       }
     },
+    "@trysound/sax": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.1.1.tgz",
+      "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
+      "dev": true
+    },
     "@types/estree": {
       "version": "0.0.39",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
@@ -6507,6 +6701,12 @@
       "integrity": "sha1-nyKcFb4nJFT/qXOs4NvueaGww28=",
       "dev": true
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -6706,9 +6906,9 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npm.taobao.org/colorette/download/colorette-1.2.2.tgz?cache=0&sync_timestamp=1614259623635&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcolorette%2Fdownload%2Fcolorette-1.2.2.tgz",
-      "integrity": "sha1-y8x51emcrqLb8Q6zom/Ys+as+pQ=",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.3.0.tgz",
+      "integrity": "sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==",
       "dev": true
     },
     "commander": {
@@ -6823,12 +7023,50 @@
         "which": "^2.0.1"
       }
     },
+    "css-select": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
+      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0",
+        "css-what": "^5.0.0",
+        "domhandler": "^4.2.0",
+        "domutils": "^2.6.0",
+        "nth-check": "^2.0.0"
+      }
+    },
+    "css-tree": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
+      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
+      "dev": true,
+      "requires": {
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "css-what": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.0.1.tgz",
+      "integrity": "sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==",
+      "dev": true
+    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.nlark.com/cssesc/download/cssesc-3.0.0.tgz",
       "integrity": "sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=",
       "dev": true
     },
+    "csso": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-4.2.0.tgz",
+      "integrity": "sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==",
+      "dev": true,
+      "requires": {
+        "css-tree": "^1.1.2"
+      }
+    },
     "csstype": {
       "version": "2.6.17",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
@@ -6901,6 +7139,43 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-serializer": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
+        "entities": "^2.0.0"
+      }
+    },
+    "domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
+      "dev": true
+    },
+    "domhandler": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.0.tgz",
+      "integrity": "sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==",
+      "dev": true,
+      "requires": {
+        "domelementtype": "^2.2.0"
+      }
+    },
+    "domutils": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
+      "dev": true,
+      "requires": {
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      }
+    },
     "dot-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
@@ -6993,6 +7268,12 @@
         "ansi-colors": "^4.1.1"
       }
     },
+    "entities": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
+      "integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
+      "dev": true
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -8277,6 +8558,12 @@
         "sourcemap-codec": "^1.4.4"
       }
     },
+    "mdn-data": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
+      "dev": true
+    },
     "merge-source-map": {
       "version": "1.1.0",
       "resolved": "https://registry.nlark.com/merge-source-map/download/merge-source-map-1.1.0.tgz",
@@ -8423,6 +8710,15 @@
       "resolved": "https://registry.npm.taobao.org/nprogress/download/nprogress-0.2.0.tgz",
       "integrity": "sha1-y480xTIT2JVyP8urkH6UIq28r7E="
     },
+    "nth-check": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+      "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+      "dev": true,
+      "requires": {
+        "boolbase": "^1.0.0"
+      }
+    },
     "on-finished": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
@@ -9018,6 +9314,12 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "stable": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
+      "integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==",
+      "dev": true
+    },
     "statuses": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
@@ -9093,6 +9395,21 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "svgo": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.5.0.tgz",
+      "integrity": "sha512-FSdBOOo271VyF/qZnOn1PgwCdt1v4Dx0Sey+U1jgqm1vqRYjPGdip0RGrFW6ItwtkBB8rHgHk26dlVr0uCs82Q==",
+      "dev": true,
+      "requires": {
+        "@trysound/sax": "0.1.1",
+        "colorette": "^1.3.0",
+        "commander": "^7.2.0",
+        "css-select": "^4.1.3",
+        "css-tree": "^1.1.3",
+        "csso": "^4.2.0",
+        "stable": "^0.1.8"
+      }
+    },
     "table": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
@@ -9428,6 +9745,16 @@
         }
       }
     },
+    "vite-svg-loader": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/vite-svg-loader/-/vite-svg-loader-2.2.0.tgz",
+      "integrity": "sha512-FP6qCN57coIOwmtah68ofpi4dewGmfzPcoKe76RMnJoz7qBTXxQVm2BlnH0YzGeCbOcjm9NKauJ1I6J9OlUUtg==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-sfc": "^3.0.11",
+        "svgo": "^2.3.0"
+      }
+    },
     "vue": {
       "version": "3.2.6",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.6.tgz",

package.json

@@ -84,6 +84,7 @@
     "vite-plugin-element-plus": "^0.0.11",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.2.1",
+    "vite-svg-loader": "^2.2.0",
     "vue-eslint-parser": "^7.7.2"
   },
   "lint-staged": {

src/assets/svg/close.svg

@@ -0,0 +1 @@
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M19.41 18l8.29-8.29a1 1 0 0 0-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 0 0-1.42 1.42l8.3 8.29l-8.3 8.29A1 1 0 1 0 9.7 27.7l8.3-8.29l8.29 8.29a1 1 0 0 0 1.41-1.41z" fill="currentColor"></path></svg>

src/assets/svg/close_all.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 36 36"><path d="M26 17H10a1 1 0 0 0 0 2h16a1 1 0 0 0 0-2z" fill="currentColor"></path></svg>

src/assets/svg/close_left.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" ></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></svg>

src/assets/svg/close_other.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M3 5h14V3H3v2zm12 8V7H5v6h10zM3 17h14v-2H3v2z" fill="currentColor"></path></svg>

src/assets/svg/close_right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g transform="translate(24 0) scale(-1 1)"><g fill="none"><path d="M7 12l7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12l7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 12H7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M3 3v18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></g></g></svg>

src/assets/svg/exit_screen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5l-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"></path></g></svg>

src/assets/svg/full_screen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"></path></g></svg>

src/assets/svg/refresh.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M400 148l-21.12-24.57A191.43 191.43 0 0 0 240 64C134 64 48 150 48 256s86 192 192 192a192.09 192.09 0 0 0 181.07-128" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="32"></path><path d="M464 68.45V220a4 4 0 0 1-4 4H308.45a4 4 0 0 1-2.83-6.83L457.17 65.62a4 4 0 0 1 6.83 2.83z" fill="currentColor"></path></svg>

src/layout/components/Navbar.vue

@@ -20,11 +20,7 @@
       >
         <img :src="currentLocale ? ch : en" />
       </div>
-      <i
-        class="el-icon-setting hsset"
-        :title="$t('message.hssystemSet')"
-        @click="onPanel"
-      ></i>
+      <i class="el-icon-setting hsset" :title="$t('message.hssystemSet')" @click="onPanel"></i>
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
@@ -33,9 +29,10 @@
         </span>
         <template #dropdown>
           <el-dropdown-menu>
-            <el-dropdown-item icon="el-icon-switch-button" @click="logout">
-              {{ $t("message.hsLoginOut") }}
-            </el-dropdown-item>
+            <el-dropdown-item
+              icon="el-icon-switch-button"
+              @click="logout"
+            >{{ $t("message.hsLoginOut") }}</el-dropdown-item>
           </el-dropdown-menu>
         </template>
       </el-dropdown>
@@ -76,7 +73,7 @@ export default defineComponent({
     currentLocale() {
       if (!this.$storage.locale) {
         // eslint-disable-next-line
-        this.$storage.locale = { locale: "zh" }
+        this.$storage.locale = { locale: "zh" };
         useI18n().locale.value = "zh";
       }
       switch (this.$storage.locale?.locale) {

src/layout/components/tag/index.vue

@@ -14,7 +14,7 @@
         @mouseenter.prevent="onMouseenter(item, index)"
         @mouseleave.prevent="onMouseleave(item, index)"
       >
-        <router-link :to="item.path">{{ $t(item.meta.title) }}</router-link>
+        <router-link :to="item.path" @click="tagOnClick(item)">{{ $t(item.meta.title) }}</router-link>
         <span
           v-if="
             ($route.path === item.path && index !== 0) ||
@@ -31,24 +31,21 @@
       </div>
     </el-scrollbar>
     <!-- 右键菜单按钮 -->
-    <ul
-      v-show="visible"
-      :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
-      class="contextmenu animate__animated animate__flipInX"
-    >
-      <div
-        v-for="(item, key) in tagsViews"
-        :key="key"
-        style="display: flex; align-items: center"
+    <transition name="el-zoom-in-top">
+      <ul
+        v-show="visible"
+        :key="Math.random()"
+        :style="{ left: buttonLeft + 'px', top: buttonTop + 'px' }"
+        class="contextmenu"
       >
-        <li v-if="item.show" @click="selectTag(item, key)">
-          <span>
-            <i :class="item.icon"></i>
-          </span>
-          {{ item.text }}
-        </li>
-      </div>
-    </ul>
+        <div v-for="(item, key) in tagsViews" :key="key" style="display: flex; align-items: center">
+          <li v-if="item.show" @click="selectTag(item, key)">
+            <component :is="item.icon" :key="key" />
+            {{ item.text }}
+          </li>
+        </div>
+      </ul>
+    </transition>
     <!-- 右侧功能按钮 -->
     <ul class="right-button">
       <li>
@@ -66,11 +63,11 @@
               <el-dropdown-item
                 v-for="(item, key) in tagsViews"
                 :key="key"
-                :icon="item.icon"
                 :divided="item.divided"
                 :disabled="item.disabled"
                 @click="onClickDrop(key, item)"
               >
+                <component :is="item.icon" :key="key" />
                 {{ item.text }}
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -100,6 +97,12 @@ import { toggleClass, removeClass, hasClass } from "/@/utils/operate";
 import { templateRef } from "@vueuse/core";
 let refreshButton = "refresh-button";
 
+import closeOther from "/@/assets/svg/close_other.svg";
+import closeLeft from "/@/assets/svg/close_left.svg";
+import closeRight from "/@/assets/svg/close_right.svg";
+import close from "/@/assets/svg/close.svg";
+import refresh from "/@/assets/svg/refresh.svg";
+import closeAll from "/@/assets/svg/close_all.svg";
 let routerArrays = [
   {
     path: "/welcome",
@@ -112,13 +115,22 @@ let routerArrays = [
   }
 ];
 export default {
+  name: "tag",
+  components: {
+    closeOther,
+    closeLeft,
+    closeRight,
+    close,
+    refresh,
+    closeAll
+  },
+  // @ts-ignore
   computed: {
     dynamicTagList() {
       if (
         !this.$storage.routesInStorage ||
         this.$storage.routesInStorage.length === 0
       ) {
-        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
         this.$storage.routesInStorage = routerArrays;
       }
       return this.$storage.routesInStorage;
@@ -134,28 +146,42 @@ export default {
     const activeIndex = ref(-1);
     const tagsViews = ref([
       {
-        icon: "el-icon-refresh-right",
+        icon: "refresh",
         text: "重新加载",
         divided: false,
         disabled: false,
         show: true
       },
       {
-        icon: "el-icon-close",
+        icon: "close",
         text: "关闭当前标签页",
         divided: false,
         disabled: routerArrays.length > 1 ? false : true,
         show: true
       },
       {
-        icon: "el-icon-more",
+        icon: "closeLeft",
+        text: "关闭左侧标签页",
+        divided: true,
+        disabled: routerArrays.length > 1 ? false : true,
+        show: true
+      },
+      {
+        icon: "closeRight",
+        text: "关闭右侧标签页",
+        divided: false,
+        disabled: routerArrays.length > 1 ? false : true,
+        show: true
+      },
+      {
+        icon: "closeOther",
         text: "关闭其他标签页",
         divided: true,
         disabled: routerArrays.length > 2 ? false : true,
         show: true
       },
       {
-        icon: "el-icon-minus",
+        icon: "closeAll",
         text: "关闭全部标签页",
         divided: false,
         disabled: routerArrays.length > 1 ? false : true,
@@ -214,32 +240,48 @@ export default {
       }, 600);
     }
 
-    function deleteDynamicTag(obj: any, current: any, other: any) {
+    function deleteDynamicTag(obj: any, current: any, tag?: string) {
       let valueIndex: number = routerArrays.findIndex((item: any) => {
         return item.path === obj.path;
       });
 
-      if (other) {
-        st.routesInStorage = routerArrays = [
-          {
-            path: "/welcome",
-            meta: {
-              title: "message.hshome",
-              icon: "el-icon-s-home",
-              showLink: true,
-              savedPosition: false
-            }
-          },
-          obj
-        ];
+      const spliceRoute = (
+        start?: number,
+        end?: number,
+        other?: boolean
+      ): void => {
+        if (other) {
+          st.routesInStorage = routerArrays = [
+            {
+              path: "/welcome",
+              meta: {
+                title: "message.hshome",
+                icon: "el-icon-s-home",
+                showLink: true,
+                savedPosition: false
+              }
+            },
+            obj
+          ];
+        } else {
+          routerArrays.splice(start, end);
+          st.routesInStorage = routerArrays;
+        }
         router.push(obj.path);
-        Array.from([2]).forEach(v => {
-          tagsViews.value[v].disabled = true;
-        });
+      };
+
+      if (tag === "other") {
+        spliceRoute(1, 1, true);
+        // Array.from([2]).forEach(v => {
+        //   tagsViews.value[v].disabled = true;
+        // });
+      } else if (tag === "left") {
+        spliceRoute(1, valueIndex - 1);
+      } else if (tag === "right") {
+        spliceRoute(valueIndex + 1, routerArrays.length);
       } else {
         // 从当前匹配到的路径中删除
-        routerArrays.splice(valueIndex, 1);
-        st.routesInStorage = routerArrays;
+        spliceRoute(valueIndex, 1);
       }
 
       if (current === obj.path) {
@@ -253,16 +295,16 @@ export default {
       }
     }
 
-    function deleteMenu(item, other = false) {
-      if (routerArrays.length === 2) {
-        Array.from([1, 2, 3]).forEach(v => {
-          tagsViews.value[v].disabled = true;
-        });
-      }
-      if (routerArrays.length === 3) {
-        tagsViews.value[2].disabled = true;
-      }
-      deleteDynamicTag(item, route.path, other);
+    function deleteMenu(item, tag?: string) {
+      // if (routerArrays.length === 2) {
+      //   Array.from([1, 2, 3]).forEach(v => {
+      //     tagsViews.value[v].disabled = true;
+      //   });
+      // }
+      // if (routerArrays.length === 3) {
+      //   tagsViews.value[2].disabled = true;
+      // }
+      deleteDynamicTag(item, route.path, tag);
     }
 
     function onClickDrop(key, item, selectRoute) {
@@ -280,29 +322,54 @@ export default {
             : deleteMenu({ path: route.path, meta: route.meta });
           break;
         case 2:
-          // 关闭其他标签页
+          // 关闭左侧标签页
           selectRoute
             ? deleteMenu(
                 {
                   path: selectRoute.path,
                   meta: selectRoute.meta
                 },
-                true
+                "left"
               )
-            : deleteMenu({ path: route.path, meta: route.meta }, true);
+            : deleteMenu({ path: route.path, meta: route.meta }, "left");
           break;
         case 3:
+          // 关闭右侧标签页
+          selectRoute
+            ? deleteMenu(
+                {
+                  path: selectRoute.path,
+                  meta: selectRoute.meta
+                },
+                "right"
+              )
+            : deleteMenu({ path: route.path, meta: route.meta }, "right");
+          break;
+        case 4:
+          // 关闭其他标签页
+          selectRoute
+            ? deleteMenu(
+                {
+                  path: selectRoute.path,
+                  meta: selectRoute.meta
+                },
+                "other"
+              )
+            : deleteMenu({ path: route.path, meta: route.meta }, "other");
+          break;
+        case 5:
           // 关闭全部标签页
           routerArrays.splice(1, routerArrays.length);
           st.routesInStorage = routerArrays;
           router.push("/welcome");
-          Array.from([1, 2, 3]).forEach(v => {
-            tagsViews.value[v].disabled = true;
-          });
           break;
       }
+      setTimeout(() => {
+        showMenuModel(route.fullPath);
+      });
     }
 
+    // 触发右键中菜单的点击事件
     function selectTag(item, key) {
       onClickDrop(key, {}, currentSelect.value);
     }
@@ -311,30 +378,77 @@ export default {
       visible.value = false;
     }
 
+    function showMenus(value: Boolean) {
+      Array.of(1, 2, 3, 4, 5).forEach(v => {
+        tagsViews.value[v].show = value;
+      });
+    }
+
+    function disabledMenus(value: Boolean) {
+      Array.of(1, 2, 3, 4, 5).forEach(v => {
+        tagsViews.value[v].disabled = value;
+      });
+    }
+
+    // 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是首页，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页
+    function showMenuModel(currentPath: string, refresh = false) {
+      let allRoute = unref(st.routesInStorage);
+      let routeLength = unref(st.routesInStorage).length;
+      // currentIndex为1时，左侧的菜单是首页，则不显示关闭左侧标签页
+      let currentIndex = allRoute.findIndex(v => v.path === currentPath);
+      // 如果currentIndex等于routeLength-1，右侧没有菜单，则不显示关闭右侧标签页
+      showMenus(true);
+
+      if (refresh) {
+        tagsViews.value[0].show = true;
+      }
+
+      if (currentIndex === 1 && routeLength !== 2) {
+        // 左侧的菜单是首页，右侧存在别的菜单
+        tagsViews.value[2].show = false;
+        Array.of(1, 3, 4, 5).forEach(v => {
+          tagsViews.value[v].disabled = false;
+        });
+        tagsViews.value[2].disabled = true;
+      } else if (currentIndex === 1 && routeLength === 2) {
+        disabledMenus(false);
+        // 左侧的菜单是首页，右侧不存在别的菜单
+        Array.of(2, 3, 4).forEach(v => {
+          tagsViews.value[v].show = false;
+          tagsViews.value[v].disabled = true;
+        });
+      } else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
+        // 当前路由是所有路由中的最后一个
+        tagsViews.value[3].show = false;
+        Array.of(1, 2, 4, 5).forEach(v => {
+          tagsViews.value[v].disabled = false;
+        });
+        tagsViews.value[3].disabled = true;
+      } else if (currentIndex === 0) {
+        // 当前路由为首页
+        disabledMenus(true);
+      } else {
+        disabledMenus(false);
+      }
+    }
+
     function openMenu(tag, e) {
       closeMenu();
       if (tag.path === "/welcome") {
         // 右键菜单为首页，只显示刷新
-        Array.from([1, 2, 3]).forEach(v => {
-          tagsViews.value[v].show = false;
-        });
+        showMenus(false);
         tagsViews.value[0].show = true;
       } else if (route.path !== tag.path) {
-        // 右键菜单匹配当前路由，显示刷新
+        // 右键菜单不匹配当前路由，隐藏刷新
         tagsViews.value[0].show = false;
-        Array.from([1, 2, 3]).forEach(v => {
-          tagsViews.value[v].show = true;
-        });
-      } else if (st.routesInStorage.length === 2) {
+        showMenuModel(tag.path);
+      } else if (st.routesInStorage.length === 2 && route.path !== tag.path) {
+        showMenus(true);
         // 只有两个标签时不显示关闭其他标签页
-        tagsViews.value[2].show = false;
-        Array.from([0, 1, 3]).forEach(v => {
-          tagsViews.value[v].show = true;
-        });
-      } else {
-        Array.from([0, 1, 2, 3]).forEach(v => {
-          tagsViews.value[v].show = true;
-        });
+        tagsViews.value[4].show = false;
+      } else if (route.path === tag.path) {
+        // 右键当前激活的菜单
+        showMenuModel(tag.path, true);
       }
 
       currentSelect.value = tag;
@@ -342,18 +456,21 @@ export default {
       const offsetLeft = unref(containerDom).getBoundingClientRect().left;
       const offsetWidth = unref(containerDom).offsetWidth;
       const maxLeft = offsetWidth - menuMinWidth;
-      const left = e.clientX - offsetLeft + 15;
+      const left = e.clientX - offsetLeft + 5;
       if (left > maxLeft) {
         buttonLeft.value = maxLeft;
       } else {
         buttonLeft.value = left;
       }
-      buttonTop.value = e.clientY;
-      nextTick(() => {
-        setTimeout(() => {
-          visible.value = true;
-        }, 50);
-      });
+      buttonTop.value = e.clientY + 10;
+      setTimeout(() => {
+        visible.value = true;
+      }, 10);
+    }
+
+    // 触发tags标签切换
+    function tagOnClick(item) {
+      showMenuModel(item.path);
     }
 
     // 鼠标移入
@@ -400,11 +517,16 @@ export default {
       st = vm.appContext.app.config.globalProperties.$storage;
       routerArrays = st.routesInStorage ?? routerArrays;
 
+      // 根据当前路由初始化操作标签页的禁用状态
+      showMenuModel(route.fullPath);
+
+      // 触发隐藏标签页
       emitter.on("tagViewsChange", key => {
         if (unref(showTags) === key) return;
         showTags.value = key;
       });
 
+      // 改变标签风格
       emitter.on("tagViewsShowModel", key => {
         showModel.value = key;
       });
@@ -412,17 +534,9 @@ export default {
       //  接收侧边栏切换传递过来的参数
       emitter.on("changLayoutRoute", ({ indexPath, parentPath }) => {
         dynamicRouteTag(indexPath, parentPath);
-
-        if (routerArrays.length === 2) {
-          Array.from([1, 3]).forEach(v => {
-            tagsViews.value[v].disabled = false;
-          });
-        }
-        if (routerArrays.length > 2) {
-          Array.from([1, 2, 3]).forEach(v => {
-            tagsViews.value[v].disabled = false;
-          });
-        }
+        setTimeout(() => {
+          showMenuModel(indexPath);
+        });
       });
     });
 
@@ -441,8 +555,10 @@ export default {
       currentSelect,
       onMouseenter,
       onMouseleave,
+      tagOnClick,
       activeIndex,
-      showModel
+      showModel,
+      showMenuModel
     };
   }
 };
@@ -518,19 +634,28 @@ export default {
     list-style-type: none;
     padding: 5px 0;
     border-radius: 4px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #333;
+    color: #000000d9;
+    font-weight: normal;
+    font-size: 13px;
+    white-space: nowrap;
     outline: 0;
     box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
     li {
       width: 100%;
       margin: 0;
-      padding: 7px 16px;
+      padding: 7px 12px;
       cursor: pointer;
+      display: flex;
+      align-items: center;
+
       &:hover {
         background: #eee;
       }
+
+      svg {
+        display: block;
+        margin-right: 0.5em;
+      }
     }
   }
 }
@@ -552,20 +677,37 @@ export default {
 
 .el-dropdown-menu {
   padding: 0;
+
+  li {
+    width: 100%;
+    margin: 0;
+    padding: 0 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    svg {
+      display: block;
+      margin-right: 0.5em;
+    }
+  }
 }
 .el-dropdown-menu__item:not(.is-disabled):hover {
   color: #606266;
   background: #f0f0f0;
 }
-.el-dropdown-menu__item,
-.el-menu-item {
-  padding: 0 14px;
-  overflow: hidden;
-}
 :deep(.el-dropdown-menu__item) i {
   margin-right: 10px;
 }
 
+.el-dropdown-menu__item--divided:before {
+  margin: 0;
+}
+
+.el-dropdown-menu__item.is-disabled {
+  cursor: not-allowed;
+}
+
 .is-active {
   background-color: #eaf4fe;
   position: relative;

src/layout/index.vue

@@ -13,14 +13,10 @@
         <navbar v-show="!containerHiddenSideBar" />
         <!-- tabs标签页 -->
         <tag>
-          <i
-            :class="
-              containerHiddenSideBar
-                ? 'iconfont team-iconhidden-main-container'
-                : 'iconfont team-iconshow-main-container'
-            "
-            @click="onFullScreen"
-          ></i>
+          <span @click="onFullScreen">
+            <fullScreen v-if="!containerHiddenSideBar" />
+            <exitScreen v-else />
+          </span>
         </tag>
       </div>
       <!-- 主体内容 -->
@@ -50,6 +46,8 @@ import { toggleClass } from "/@/utils/operate";
 let hiddenMainContainer = "hidden-main-container";
 import options from "/@/settings";
 
+import fullScreen from "/@/assets/svg/full_screen.svg";
+import exitScreen from "/@/assets/svg/exit_screen.svg";
 interface setInter {
   sidebar: any;
   device: string;
@@ -64,7 +62,9 @@ export default {
     Sidebar,
     AppMain,
     setting,
-    tag
+    tag,
+    fullScreen,
+    exitScreen
   },
   setup() {
     const pureApp = useAppStoreHook();
@@ -220,4 +220,8 @@ $sideBarWidth: 210px;
 .hidden-main-container {
   margin-left: 0 !important;
 }
+
+.re-screen {
+  margin-top: 12px;
+}
 </style>

src/style/index.scss

@@ -86,6 +86,8 @@ ul {
 
 .resetTop {
   top: 48px !important;
+  outline: 0;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
 }
 
 // 灰色模式
@@ -116,3 +118,7 @@ ul {
 .mobile-spacing {
   margin: 0;
 }
+
+.el-popper[data-popper-placement^="bottom"] > .el-popper__arrow {
+  top: 0 !important;
+}

vite.config.ts

@@ -5,6 +5,7 @@ import vueJsx from "@vitejs/plugin-vue-jsx"
 import { loadEnv } from "./build/utils"
 import { createProxy } from "./build/proxy"
 import { viteMockServe } from "vite-plugin-mock"
+import svgLoader from "vite-svg-loader"
 import styleImport from "vite-plugin-style-import"
 import VitePluginElementPlus from "vite-plugin-element-plus"
 
@@ -52,6 +53,7 @@ export default ({ command }: ConfigEnv): UserConfigExport => {
     plugins: [
       vue(),
       vueJsx(),
+      svgLoader(),
       styleImport({
         libs: [
           // 按需加载vxe-table