feat: 添加WindiCSS支持

.vscode/extensions.json

@@ -1,5 +1,6 @@
 {
   "recommendations": [
+    "voorjaar.windicss-intellisense",
     "stylelint.vscode-stylelint",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",

.vscode/settings.json

@@ -6,6 +6,7 @@
    * vscode-icons
    * i18n Ally
    * Iconify IntelliSense
+   * WindiCSS IntelliSense
    * TypeScript Vue Plugin (Volar)
    * Vue Language Features (Volar)
    */

package.json

@@ -114,8 +114,10 @@
     "vite-plugin-full-reload": "^1.0.0",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-style-import": "^1.2.1",
+    "vite-plugin-windicss": "^1.6.1",
     "vite-svg-loader": "^2.2.0",
-    "vue-eslint-parser": "7.10.0"
+    "vue-eslint-parser": "7.10.0",
+    "windicss": "^3.4.2"
   },
   "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
   "author": "xiaoxian521",

src/main.ts

@@ -11,6 +11,7 @@ import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
 import "animate.css";
+import "virtual:windi.css";
 // 导入公共样式
 import "./style/index.scss";
 // 导入字体图标

vite.config.ts

@@ -3,6 +3,7 @@ import vue from "@vitejs/plugin-vue";
 import svgLoader from "vite-svg-loader";
 import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
+import WindiCSS from "vite-plugin-windicss";
 import { warpperEnv, regExps } from "./build";
 import fullReload from "vite-plugin-full-reload";
 import { viteMockServe } from "vite-plugin-mock";
@@ -83,6 +84,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
       vue(),
       // jsx、tsx语法支持
       vueJsx(),
+      WindiCSS(),
       // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
       fullReload(["src/layout/**/*"]),
       // 自定义主题

windi.config.ts

@@ -0,0 +1,51 @@
+import { defineConfig } from "windicss/helpers";
+import colors from "windicss/colors";
+import typography from "windicss/plugin/typography";
+
+export default defineConfig({
+  darkMode: "class",
+  // https://windicss.org/posts/v30.html#attributify-mode
+  attributify: true,
+
+  plugins: [typography()],
+  theme: {
+    extend: {
+      zIndex: {
+        "-1": "-1"
+      },
+      screens: {
+        sm: "576px",
+        md: "768px",
+        lg: "992px",
+        xl: "1200px",
+        "2xl": "1600px"
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: "65ch",
+            color: "inherit",
+            a: {
+              color: "inherit",
+              opacity: 0.75,
+              fontWeight: "500",
+              textDecoration: "underline",
+              "&:hover": {
+                opacity: 1,
+                color: colors.teal[600]
+              }
+            },
+            b: { color: "inherit" },
+            strong: { color: "inherit" },
+            em: { color: "inherit" },
+            h1: { color: "inherit" },
+            h2: { color: "inherit" },
+            h3: { color: "inherit" },
+            h4: { color: "inherit" },
+            code: { color: "inherit" }
+          }
+        }
+      }
+    }
+  }
+});