refactor(design): add windicss

.env.production

@@ -10,7 +10,7 @@ VITE_DROP_CONSOLE = true
 # Whether to enable gizp or brotli compression
 # Optional: gzip | brotli | none
 # If you need multiple forms, you can use `,` to separate
-VITE_BUILD_COMPRESS = 'gzip'
+VITE_BUILD_COMPRESS = 'none'
 
 # Basic interface address SPA
 VITE_GLOB_API_URL=/api

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
+    "johnsoncodehk.volar",
     "octref.vetur",
     "dbaeumer.vscode-eslint",
     "stylelint.vscode-stylelint",

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
   "typescript.tsdk": "./node_modules/typescript/lib",
+  "volar.tsPlugin": true,
+  "volar.tsPluginStatus": false,
   //===========================================
   //============= Editor ======================
   //===========================================

CHANGELOG.zh_CN.md

@@ -1,10 +1,15 @@
 ## Wip
 
+### ✨ Refactor
+
+- 移除`global.less`,`mixin.less`,`design/helper`,由`windicss`代替,有用到的需要修改对应的样式
+
 ### ✨ Features
 
 - useModal 新增返回值函数 `redoModalHeight`,用于在 modal 内为动态内容时刷新 modal 高度
 - 升级 husky 到 5.0
 - 新增 `brotli`|`gzip`压缩及相关测试命令
+- 重新引入 `windicss` (与`tailwind`一样).在速度上更快
 
 ### ⚡ Performance Improvements
 
@@ -23,7 +28,8 @@
 ### 🎫 Chores
 
 - 文档更新
-- 升级 ant-design-vue 到 2.0.0
+- 升级 ant-design-vue 到 `2.0.0`
+- 升级 vite 到 `2.0.0`
 
 ## 2.0.0-rc.18 (2021-02-05)
 

build/vite/plugin/index.ts

@@ -1,10 +1,12 @@
 import type { Plugin } from 'vite';
 
-import PurgeIcons from 'vite-plugin-purge-icons';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import legacy from '@vitejs/plugin-legacy';
 
+import windiCSS from 'vite-plugin-windicss';
+import PurgeIcons from 'vite-plugin-purge-icons';
+
 import { ViteEnv } from '../../utils';
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
@@ -23,6 +25,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     vue(),
     // have to
     vueJsx(),
+    ...windiCSS(),
   ];
 
   // @vitejs/plugin-legacy

package.json

@@ -51,9 +51,9 @@
   "devDependencies": {
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
-    "@iconify/json": "^1.1.299",
+    "@iconify/json": "^1.1.303",
     "@ls-lint/ls-lint": "^1.9.2",
-    "@purge-icons/generated": "^0.6.0",
+    "@purge-icons/generated": "^0.7.0",
     "@types/echarts": "^4.9.3",
     "@types/fs-extra": "^9.0.7",
     "@types/http-proxy": "^1.17.5",
@@ -99,15 +99,16 @@
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
     "typescript": "^4.1.5",
-    "vite": "2.0.0-beta.70",
+    "vite": "2.0.0",
     "vite-plugin-compression": "^0.2.1",
     "vite-plugin-html": "^2.0.0",
     "vite-plugin-imagemin": "^0.2.6",
     "vite-plugin-mock": "^2.1.4",
-    "vite-plugin-purge-icons": "^0.6.0",
-    "vite-plugin-pwa": "^0.4.6",
+    "vite-plugin-purge-icons": "^0.7.0",
+    "vite-plugin-pwa": "^0.4.7",
     "vite-plugin-style-import": "^0.7.2",
     "vite-plugin-theme": "^0.4.3",
+    "vite-plugin-windicss": "^0.2.2",
     "vue-eslint-parser": "^7.5.0",
     "yargs": "^16.2.0"
   },

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <ConfigProvider v-bind="lockEvent" :locale="antConfigLocale">
     <AppProvider>
-      <router-view />
+      <RouterView />
     </AppProvider>
   </ConfigProvider>
 </template>

src/components/Application/src/AppLogo.vue

@@ -9,7 +9,11 @@
     @click="handleGoHome"
   >
     <img src="../../../assets/images/logo.png" />
-    <div class="ml-2 ellipsis" :class="[`${prefixCls}__title`]" v-show="showTitle">
+    <div
+      class="ml-2 truncate xs:opacity-0 md:opacity-100"
+      :class="`${prefixCls}__title`"
+      v-show="showTitle"
+    >
       {{ title }}
     </div>
   </div>
@@ -85,12 +89,7 @@
     &__title {
       font-size: 16px;
       font-weight: 700;
-      opacity: 0;
       transition: all 0.5s;
-
-      .respond-to(medium,{
-       opacity: 1;
-      });
     }
   }
 </style>

src/components/Basic/src/BasicTitle.vue

@@ -41,8 +41,8 @@
     font-weight: 700;
     line-height: 24px;
     color: @text-color-base;
-
-    .unselect();
+    cursor: pointer;
+    user-select: none;
 
     &.show-span::before {
       position: absolute;

src/components/SimpleMenu/src/components/menu.less

@@ -41,10 +41,6 @@
       cursor: pointer;
       transition: all @transition-time @ease-in-out;
 
-      // &:hover {
-      //   color: @primary-color;
-      // }
-
       &-icon {
         position: absolute;
         top: 50%;
@@ -164,9 +160,10 @@
       position: relative;
       z-index: 1;
       padding: 12px 24px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
       cursor: pointer;
-      .text-truncate();
-      // transition: all @transition-time @ease-in-out;
 
       &:hover {
         color: @primary-color;

src/components/SimpleMenu/src/index.less

@@ -18,15 +18,19 @@
   }
 
   .collapse-title {
+    overflow: hidden;
     font-size: 12px;
-    .text-truncate();
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 }
 
 .@{simple-prefix-cls} {
   &-sub-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     transition: all 0.3s;
-    .text-truncate();
   }
 
   &-tag {

src/components/Upload/src/data.tsx

@@ -40,7 +40,7 @@ export function createTableColumns(): BasicColumn[] {
         }
         return (
           <span>
-            <p class="ellipsis mb-1" title={text}>
+            <p class="truncate mb-1" title={text}>
               {text}
             </p>
             <Progress percent={percent} size="small" status={status} />

src/design/ant/input.less

@@ -1,4 +1,3 @@
-@import '../mixins.less';
 @import '../color.less';
 
 // input

src/design/config.less

@@ -1,3 +1,2 @@
 @import 'color.less';
 @import 'var/index.less';
-@import 'mixins.less';