feat: css import on demand

CHANGELOG.zh_CN.md

@@ -4,6 +4,10 @@
 
 - 新增 `SimpleMenu`组件替代左侧菜单组件(顶部菜单没有替换,功能尽量做到简单不卡)。解决菜单卡顿问题。
 
+### ✨ Features
+
+- `css` 按需引入
+
 ### 🐛 Bug Fixes
 
 - 修复 `TableAction`图标问题

build/vite/plugin/index.ts

@@ -11,6 +11,7 @@ import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
 import { configGzipPlugin } from './gzip';
+import { configStyleImportConfig } from './style-import';
 
 // gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: string) {
@@ -28,6 +29,9 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, mode: stri
   // vite-plugin-purge-icons
   vitePlugins.push(PurgeIcons());
 
+  // vite-plugin-style-import
+  vitePlugins.push(configStyleImportConfig());
+
   // rollup-plugin-gzip
   vitePlugins.push(configGzipPlugin(isBuild));
 

build/vite/plugin/style-import.ts

+import styleImport from 'vite-plugin-style-import';
+
+export function configStyleImportConfig() {
+  const pwaPlugin = styleImport({
+    libs: [
+      {
+        libraryName: 'ant-design-vue',
+        resolveStyle: (name) => {
+          // ! col row popconfirm These three components have no corresponding css files after packaging. Need special treatment
+
+          if (['col', 'row'].includes(name)) {
+            return 'ant-design-vue/lib/grid/style/index.css';
+          }
+
+          if (['popconfirm'].includes(name)) {
+            return [
+              'ant-design-vue/lib/popover/style/index.css',
+              'ant-design-vue/lib/button/style/index.css',
+            ];
+          }
+          return `ant-design-vue/lib/${name}/style/index.css`;
+        },
+      },
+    ],
+  });
+  return pwaPlugin;
+}

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "bootstrap": "yarn install",
     "serve": "vite",
+    "dev": "vite",
     "build": "vite build && esno ./build/script/postBuild.ts",
     "build:no-cache": "yarn clean:cache && npm run build",
     "report": "cross-env REPORT=true npm run build ",
@@ -12,6 +13,7 @@
     "log": "conventional-changelog -p custom-config -i CHANGELOG.md -s -r 0",
     "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite_opt_cache",
     "clean:lib": "npx rimraf node_modules",
+    "typecheck": "vuedx-typecheck .",
     "lint:eslint": "eslint --fix --ext \"src/**/*.{vue,less,css,scss}\"",
     "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
@@ -32,7 +34,7 @@
     "path-to-regexp": "^6.2.0",
     "qrcode": "^1.4.4",
     "sortablejs": "^1.13.0",
-    "vditor": "^3.7.5",
+    "vditor": "^3.7.6",
     "vue": "^3.0.5",
     "vue-i18n": "^9.0.0-rc.2",
     "vue-router": "^4.0.3",
@@ -66,8 +68,8 @@
     "@vitejs/plugin-vue": "^1.0.6",
     "@vitejs/plugin-vue-jsx": "^1.0.2",
     "@vue/compiler-sfc": "^3.0.5",
-    "@vuedx/typecheck": "^0.5.0",
-    "@vuedx/typescript-plugin-vue": "^0.5.0",
+    "@vuedx/typecheck": "^0.6.0",
+    "@vuedx/typescript-plugin-vue": "^0.6.0",
     "autoprefixer": "^10.2.1",
     "commitizen": "^4.2.3",
     "conventional-changelog-cli": "^2.1.1",
@@ -101,6 +103,7 @@
     "vite-plugin-mock": "^2.0.0-beta.3",
     "vite-plugin-purge-icons": "^0.5.1",
     "vite-plugin-pwa": "^0.3.8",
+    "vite-plugin-style-import": "^0.2.1",
     "vue-eslint-parser": "^7.3.0",
     "yargs": "^16.2.0"
   },

src/components/registerGlobComp.ts

@@ -40,7 +40,7 @@ import {
   Col,
   Spin,
 } from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css';
+// import 'ant-design-vue/dist/antd.css';
 
 import { App } from 'vue';
 

src/views/demo/page/form/basic/index.vue

@@ -3,6 +3,7 @@
     title="基础表单"
     contentBackground
     content=" 表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
+    contentClass="p-4"
   >
     <BasicForm @register="register" />
   </PageWrapper>

src/views/demo/page/form/high/index.vue

@@ -4,6 +4,7 @@
     title="高级表单"
     contentBackground
     content=" 高级表单常见于一次性输入和提交大批量数据的场景。"
+    contentClass="p-4"
   >
     <a-card title="仓库管理" :bordered="false">
       <BasicForm @register="register" />

src/views/demo/page/form/step/index.vue

@@ -3,6 +3,7 @@
     title="分步表单"
     contentBackground
     content=" 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。"
+    contentClass="p-4"
   >
     <div class="step-form-form">
       <a-steps :current="current">