chore: 优化样式

index.html

@@ -36,9 +36,7 @@
           border-radius: 50%;
           width: 2.5em;
           height: 2.5em;
-          -webkit-animation-fill-mode: both;
           animation-fill-mode: both;
-          -webkit-animation: loadAnimation 1.8s infinite ease-in-out;
           animation: loadAnimation 1.8s infinite ease-in-out;
         }
 
@@ -48,10 +46,7 @@
           margin: 80px auto;
           position: relative;
           text-indent: -9999em;
-          -webkit-transform: translateZ(0);
-          -ms-transform: translateZ(0);
           transform: translateZ(0);
-          -webkit-animation-delay: -0.16s;
           animation-delay: -0.16s;
           top: 0;
           transform: translate(-50%, 0);
@@ -66,7 +61,6 @@
 
         .loader:before {
           left: -3.5em;
-          -webkit-animation-delay: -0.32s;
           animation-delay: -0.32s;
         }
 
@@ -74,18 +68,6 @@
           left: 3.5em;
         }
 
-        @-webkit-keyframes loadAnimation {
-          0%,
-          80%,
-          100% {
-            box-shadow: 0 2.5em 0 -1.3em;
-          }
-
-          40% {
-            box-shadow: 0 2.5em 0 0;
-          }
-        }
-
         @keyframes loadAnimation {
           0%,
           80%,

src/style/element-plus.scss

@@ -36,17 +36,17 @@
   z-index: 99999 !important;
 }
 
-/* 重置button中icon的margin */
+/* 重置 el-button 中 icon 的 margin */
 .reset-margin [class*="el-icon"] + span {
   margin-left: 2px !important;
 }
 
-/* 自定义popover的类名 */
+/* 自定义 popover 的类名 */
 .pure-popper {
   padding: 0 !important;
 }
 
-/* nprogress适配ep的primary */
+/* nprogress 适配 element-plus 的主题色 */
 #nprogress {
   & .bar {
     background-color: var(--el-color-primary) !important;

src/style/index.scss

@@ -5,36 +5,11 @@
 @import "./dark.scss";
 @import "./tailwind.css";
 
+/* 自定义全局 CssVar */
 :root {
   --pure-transition-duration: 0.016s;
 }
 
-body {
-  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;
-}
-
-html {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-#app {
-  width: 100%;
-  height: 100%;
-}
-
-/* 头部用户信息样式重置 */
-.hidden {
-  display: none !important;
-}
-
 /* 灰色模式 */
 .html-grey {
   filter: grayscale(100%);
@@ -45,15 +20,7 @@ html {
   filter: invert(80%);
 }
 
-.pc-spacing {
+/* 重置 vxe-table 中 pager 样式 */
-  margin: 10px;
-}
-
-.mobile-spacing {
-  margin: 0;
-}
-
-/* 重置vxe-table中pager样式 */
 .vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
   color: #fff !important;
 }

src/style/reset.scss

@@ -1,67 +1,49 @@
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
 *,
 ::before,
 ::after {
-  box-sizing: border-box; /* 1 */
+  box-sizing: border-box;
-  border-width: 0; /* 2 */
+  border-width: 0;
-  border-style: solid; /* 2 */
+  border-style: solid;
-  border-color: currentColor; /* 2 */
+  border-color: currentColor;
 }
 
-/*
+#app {
-1. Use a consistent sensible line-height in all browsers.
+  width: 100%;
-2. Prevent adjustments of font size after orientation changes in iOS.
+  height: 100%;
-3. Use a more readable tab size.
+}
-4. Use the user's configured `sans` font-family by default.
-*/
 
 html {
-  line-height: 1.5; /* 1 */
+  line-height: 1.5;
-  -webkit-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4; /* 3 */
+  -moz-tab-size: 4;
-  tab-size: 4; /* 3 */
+  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;
 }
 
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0; /* 1 */
-  line-height: inherit; /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
 hr {
-  height: 0; /* 1 */
+  height: 0;
-  color: inherit; /* 2 */
+  color: inherit;
-  border-top-width: 1px; /* 3 */
+  border-top-width: 1px;
 }
 
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
 abbr:where([title]) {
   text-decoration: underline dotted;
 }
 
-/*
-Remove the default font size and weight for headings.
-*/
-
 h1,
 h2,
 h3,
@@ -72,50 +54,29 @@ h6 {
   font-weight: inherit;
 }
 
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
 a {
   color: inherit;
   text-decoration: inherit;
 }
 
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
 b,
 strong {
   font-weight: bolder;
 }
 
-/*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
-*/
-
 code,
 kbd,
 samp,
 pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace; /* 1 */
+    "Liberation Mono", "Courier New", monospace;
-  font-size: 1em; /* 2 */
+  font-size: 1em;
 }
 
-/*
-Add the correct font size in all browsers.
-*/
-
 small {
   font-size: 80%;
 }
 
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
 sub,
 sup {
   font-size: 75%;
@@ -132,132 +93,73 @@ sup {
   top: -0.5em;
 }
 
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
 table {
-  text-indent: 0; /* 1 */
+  text-indent: 0;
-  border-color: inherit; /* 2 */
+  border-color: inherit;
-  border-collapse: collapse; /* 3 */
+  border-collapse: collapse;
 }
 
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
 button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: inherit; /* 1 */
+  font-family: inherit;
-  font-size: 100%; /* 1 */
+  font-size: 100%;
-  line-height: inherit; /* 1 */
+  line-height: inherit;
-  color: inherit; /* 1 */
+  color: inherit;
-  margin: 0; /* 2 */
+  margin: 0;
-  padding: 0; /* 3 */
+  padding: 0;
 }
 
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
 button,
 select {
   text-transform: none;
 }
 
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button; /* 1 */
+  -webkit-appearance: button;
-  background-image: none; /* 2 */
+  background-image: none;
 }
 
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
 :-moz-focusring {
   outline: auto;
 }
 
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
 :-moz-ui-invalid {
   box-shadow: none;
 }
 
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
 progress {
   vertical-align: baseline;
 }
 
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   height: auto;
 }
 
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
 [type="search"] {
-  -webkit-appearance: textfield; /* 1 */
+  -webkit-appearance: textfield;
-  outline-offset: -2px; /* 2 */
+  outline-offset: -2px;
 }
 
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
+  -webkit-appearance: button;
-  font: inherit; /* 2 */
+  font: inherit;
 }
 
-/*
-Add the correct display in Chrome and Safari.
-*/
-
 summary {
   display: list-item;
 }
 
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
 blockquote,
 dl,
 dd,
@@ -291,47 +193,25 @@ menu {
   padding: 0;
 }
 
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
 textarea {
   resize: vertical;
 }
 
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
 input::placeholder,
 textarea::placeholder {
-  opacity: 1; /* 1 */
+  opacity: 1;
-  color: #9ca3af; /* 2 */
+  color: #9ca3af;
 }
 
-/*
-Set the default cursor for buttons.
-*/
-
 button,
 [role="button"] {
   cursor: pointer;
 }
 
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
 :disabled {
   cursor: default;
 }
 
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
 img,
 svg,
 video,
@@ -340,24 +220,16 @@ audio,
 iframe,
 embed,
 object {
-  display: block; /* 1 */
+  display: block;
-  vertical-align: middle; /* 2 */
+  vertical-align: middle;
 }
 
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
 img,
 video {
   max-width: 100%;
   height: auto;
 }
 
-/*
-Ensure the default browser behavior of the `hidden` attribute.
-*/
-
 [hidden] {
   display: none;
 }

src/style/sidebar.scss

@@ -1,6 +1,5 @@
-@mixin merge-style(
+/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
-  /* vertical模式下主体内容距离网页文档左侧的距离 */ $sideBarWidth
+@mixin merge-style($sideBarWidth) {
-) {
   $menuActiveText: #7a80b4;
 
   @media screen and (min-width: 150px) and (max-width: 420px) {
@@ -26,7 +25,7 @@
   .main-container {
     height: 100vh;
     min-height: 100%;
-    /* main-content属性动画 */
+    /* main-content 属性动画 */
     transition: margin-left var(--pure-transition-duration);
     margin-left: $sideBarWidth;
     position: relative;
@@ -44,7 +43,7 @@
     right: 0;
     z-index: 998;
     width: calc(100% - 210px);
-    /* fixed-header属性左上角动画 */
+    /* fixed-header 属性左上角动画 */
     transition: width var(--pure-transition-duration);
   }
 
@@ -324,7 +323,7 @@
     }
   }
 
-  /* vertical菜单折叠 */
+  /* vertical 菜单折叠 */
   .el-menu--vertical {
     .el-menu--popup {
       background-color: $subMenuBg !important;
@@ -398,7 +397,7 @@
     }
   }
 
-  /* horizontal菜单 */
+  /* horizontal 菜单 */
   .el-menu--horizontal {
     & > .el-sub-menu .el-sub-menu__icon-arrow {
       position: static !important;
@@ -422,7 +421,7 @@
       }
     }
 
-    /* 无子菜单时激活border-bottom */
+    /* 无子菜单时激活 border-bottom */
     .router-link-exact-active > .submenu-title-noDropdown {
       height: 60px;
       border-bottom: 2px solid var(--el-menu-active-color);

tsconfig.json

@@ -42,5 +42,5 @@
     "mock/*.ts",
     "vite.config.ts"
   ],
-  "exclude": ["node_modules", "dist", "**/*.js"]
+  "exclude": ["node_modules", "dist", "**/*.js", "index.html"]
 }