feat: 新增unocss

electron.vite.config.ts

@@ -1,6 +1,7 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
 import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
 
 export default defineConfig({
   main: {
@@ -22,6 +23,6 @@ export default defineConfig({
         '@renderer': resolve('src/renderer/src')
       }
     },
-    plugins: [vue()]
+    plugins: [UnoCSS(), vue()]
   }
 })

package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@unocss/reset": "^0.64.1",
     "electron-updater": "^6.1.7",
     "inversify": "^6.1.4",
     "lowdb": "^7.0.1",
@@ -36,6 +37,7 @@
     "@electron-toolkit/tsconfig": "^1.0.1",
     "@rushstack/eslint-patch": "^1.10.3",
     "@types/node": "^20.14.8",
+    "@unocss/preset-rem-to-px": "^0.64.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
@@ -46,6 +48,7 @@
     "eslint-plugin-vue": "^9.26.0",
     "prettier": "^3.3.2",
     "typescript": "^5.5.2",
+    "unocss": "^0.64.1",
     "vite": "^5.3.1",
     "vue": "^3.4.30",
     "vue-tsc": "^2.0.22"

src/renderer/src/main.ts

@@ -1,3 +1,5 @@
+import 'virtual:uno.css'
+import '@unocss/reset/normalize.css'
 import './assets/main.css'
 
 import { createApp } from 'vue'

src/renderer/src/shims.d.ts

@@ -0,0 +1,5 @@
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
+
+declare module '@vue/runtime-dom' {
+    interface HTMLAttributes extends AttributifyAttributes { }
+}

uno.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig, presetAttributify, presetUno } from 'unocss'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+
+export default defineConfig({
+    presets: [
+        presetAttributify(),
+        presetUno(),
+        presetRemToPx(),
+    ],
+})