perf: update style

Author: anncwb

CHANGELOG.zh_CN.md

@@ -1,3 +1,9 @@
+## Wip
+
+### 🐛 Bug Fixes
+
+- 修复菜单在 hmr 时数据被置空
+
 ## 2.0.0-rc.18 (2021-02-05)
 
 ### ✨ Features

package.json

@@ -96,11 +96,11 @@
     "vite": "2.0.0-beta.64",
     "vite-plugin-html": "^2.0.0",
     "vite-plugin-imagemin": "^0.2.2",
-    "vite-plugin-mock": "^2.0.1",
+    "vite-plugin-mock": "2.0.5",
     "vite-plugin-purge-icons": "^0.6.0",
-    "vite-plugin-pwa": "^0.4.2",
-    "vite-plugin-style-import": "^0.5.5",
-    "vite-plugin-theme": "0.3.3",
+    "vite-plugin-pwa": "^0.4.3",
+    "vite-plugin-style-import": "^0.6.6",
+    "vite-plugin-theme": "0.3.8",
     "vue-eslint-parser": "^7.4.1",
     "yargs": "^16.2.0"
   },

src/components/Form/src/components/FormItem.tsx

@@ -321,7 +321,7 @@ export default defineComponent({
 
       return (
         isIfShow && (
-          <Col {...realColProps} class={{ hidden: !isShow }}>
+          <Col {...realColProps} v-show={isShow}>
             {getContent()}
           </Col>
         )

src/components/Menu/src/BasicMenu.vue

@@ -122,6 +122,9 @@
         watch(
           () => props.items,
           () => {
+            if (import.meta.hot && props.items.length === 0) {
+              return;
+            }
             handleMenuChange();
           }
         );

src/design/global.less

@@ -1,10 +1,6 @@
 @import './helper/distance.less';
 .distance();
 
-.hidden {
-  display: none !important;
-}
-
 .flex {
   display: flex;
 }

src/design/index.less

@@ -13,6 +13,11 @@
   box-sizing: border-box;
 }
 
+:root {
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
 input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px white inset !important;
 }
@@ -33,6 +38,8 @@ html,
 
 html {
   overflow: hidden;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
 }
 
 html,
@@ -53,34 +60,9 @@ body {
 }
 
 body {
-  font-family: 'BlinkMacSystemFont,segoe ui,Microsoft YaHei,Arial,sans-serif,Helvetica Neue,Helvetica,Pingfang SC,Hiragino Sans GB,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji';
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1.428571429; // 20/14
-  letter-spacing: normal;
-  word-spacing: normal;
-  text-align: left; // Fallback for where `start` is not supported
-  text-align: start;
-  text-decoration: none;
-  text-size-adjust: 100%;
-  text-shadow: none;
-  text-transform: none;
-  word-break: normal;
-  word-wrap: normal;
-  white-space: normal;
-  line-break: auto;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0.5em;
-  font-weight: 500;
-  color: @heading-color;
+  font-family: system-ui, -apple-system, 'Segoe UI', Microsoft YaHei, Arial, sans-serif,
+    Helvetica Neue, Helvetica, Pingfang SC, Hiragino Sans GB, Roboto, helvetica neue, noto sans,
+    apple color emoji, segoe ui emoji, segoe ui symbol, noto color emoji;
 }
 
 ul,
@@ -92,68 +74,121 @@ li {
   list-style-type: none;
 }
 
-img {
-  vertical-align: top;
-  border: 0;
+a:focus,
+a:active {
+  outline: none;
+}
+
+hr {
+  height: 0;
+  color: inherit;
+}
+
+abbr[title] {
+  text-decoration: underline dotted;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  font-size: 1em;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
 }
 
 table {
-  border-collapse: collapse;
-  border-spacing: 0;
+  text-indent: 0;
+  border-color: inherit;
 }
 
-a:focus,
-a:active {
-  outline: none;
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
 }
 
-i,
-em {
-  font-style: normal;
+button,
+select {
+  text-transform: none;
 }
 
 button,
-div:focus {
-  outline: none !important;
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button;
 }
 
-a {
-  color: @link-color;
-  text-decoration: none;
-  cursor: pointer;
-  background-color: transparent; // remove the gray background on active links in IE 10.
-  outline: none;
-  transition: color 0.3s;
-  -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
 
-  &:hover {
-    color: @link-hover-color;
-  }
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
 
-  &:active {
-    color: @link-active-color;
-  }
+:-moz-ui-invalid {
+  box-shadow: none;
+}
 
-  &:active,
-  &:hover {
-    text-decoration: none;
-    outline: 0;
-  }
+legend {
+  padding: 0;
+}
 
-  &[disabled] {
-    color: @disabled-color;
-    pointer-events: none;
-    cursor: not-allowed;
-  }
+progress {
+  vertical-align: baseline;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type='search'] {
+  outline-offset: -2px;
+  -webkit-appearance: textfield;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
 }
 
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  vertical-align: baseline !important;
+summary {
+  display: list-item;
 }

src/layouts/default/sider/LayoutSider.vue

@@ -2,9 +2,10 @@
   <div
     v-if="getMenuFixed && !getIsMobile"
     :style="getHiddenDomStyle"
-    :class="{ hidden: !showClassSideBarRef }"
+    v-show="showClassSideBarRef"
   ></div>
   <Sider
+    v-show="showClassSideBarRef"
     ref="sideRef"
     breakpoint="lg"
     collapsible
@@ -84,7 +85,6 @@
           prefixCls,
           {
             [`${prefixCls}--fixed`]: unref(getMenuFixed),
-            hidden: !unref(showClassSideBarRef),
             [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
           },
         ];

tsconfig.json

@@ -12,6 +12,7 @@
     "allowJs": true,
     "sourceMap": true,
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "experimentalDecorators": true,