refactor: 样式文件结构优化，新增重置样式

Former-commit-id: 244309f3ab8375f83df2d69b1b474cab23045b22

src/styles/dark.scss

@@ -1,4 +1,14 @@
 html.dark{
+  --menuBg:var(--el-bg-color-overlay);
+  --menuText:#fff;
+  --menuActiveText:var(--el-menu-active-color);
+  --menuHover:rgba(0,0,0,.2);
+
+  --subMenuBg: var(--el-menu-bg-color);
+  --subMenuActiveText:var(--el-menu-active-color);
+  --subMenuHover: rgba(0,0,0,.2);
+
+
   .navbar {
     background-color: var(--el-bg-color);
     color: var(--el-text-color-regular);

src/styles/global.scss

@@ -1,30 +0,0 @@
-html,
-body,
-#app {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-a{
-  text-decoration:none
-}
-
-
-svg {
-    vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
-}
-
-
-// main-container global css
-.app-container {
-    padding: 20px;
-}
-
-.search {
-    padding: 18px 0 0 10px;
-    margin-bottom: 10px;
-    border-radius: var(--el-card-border-radius);
-    border: 1px solid var(--el-border-color-light);
-    box-shadow: var(--el-box-shadow-light);
-    background-color: var(--el-bg-color-overlay);
-}

src/styles/index.scss

@@ -1,27 +1,20 @@
 @import './sidebar.scss';
-@import './global.scss';
+@import './reset.scss';
 @import './dark.scss';
 
-// 自定义全局CSS变量
-:root{
-  --menuBg:#304156;
-  --menuText:#bfcbd9;
-  --menuActiveText:#409eff;
-  --menuHover:#263445;
 
-  --subMenuBg: #1f2d3d;
-  --subMenuActiveText: #f4f4f5;
-  --subMenuHover: #001528;
 
+
+// main-container global css
+.app-container {
+    padding: 20px;
 }
 
-html.dark{
+.search {
-  --menuBg:var(--el-bg-color-overlay);
+    padding: 18px 0 0 10px;
-  --menuText:#fff;
+    margin-bottom: 10px;
-  --menuActiveText:var(--el-menu-active-color);
+    border-radius: var(--el-card-border-radius);
-  --menuHover:rgba(0,0,0,.2);
+    border: 1px solid var(--el-border-color-light);
-
+    box-shadow: var(--el-box-shadow-light);
-  --subMenuBg: var(--el-menu-bg-color);
+    background-color: var(--el-bg-color-overlay);
-  --subMenuActiveText:var(--el-menu-active-color);
-  --subMenuHover: rgba(0,0,0,.2);
 }

src/styles/reset.scss

@@ -0,0 +1,90 @@
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: currentColor;
+}
+
+#app {
+  width: 100%;
+  height: 100%;
+}
+
+html {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  line-height: inherit;
+  width: 100%;
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizelegibility;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+}
+
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+
+img,
+svg
+ {
+  display: inline-block;
+}
+svg {
+  vertical-align: -0.15em; //因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
+}
+
+
+
+
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.clearfix {
+  &::after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+

src/styles/variables.scss

@@ -1,4 +1,18 @@
 // 全局SCSS变量
+
+:root{
+  --menuBg:#304156;
+  --menuText:#bfcbd9;
+  --menuActiveText:#409eff;
+  --menuHover:#263445;
+
+  --subMenuBg: #1f2d3d;
+  --subMenuActiveText: #f4f4f5;
+  --subMenuHover: #001528;
+
+}
+
+
 $menuBg: var(--menuBg);
 $menuText: var(--menuText);
 $menuActiveText: var(--menuActiveText);