windicss 替换为 unocss

app.vue

@@ -6,11 +6,11 @@
     nav.container.mx-auto.flex.text-gray-400.text-lg.font-bold
       template(v-for="item in navbar")
         NuxtLink.px-4.py-6.transition-all.duration-150(
-          class="hover:text-gray-800",
-          :class="{ 'text-black': item.active }",
+          class="text-gray-500 hover:text-dark-800",
+          :class="{ 'text-dark-800': item.active }",
           :to="item.path"
         ) {{ item.title }}
-      NuxtLink.px-4.py-6.ml-auto(to="/account" v-if="!account.padding") {{ account.online ? account.name : '登录' }}
+      NuxtLink.px-4.py-6.ml-auto.text-gray-500(to="/account" v-if="!account.padding") {{ account.online ? account.name : '登录' }}
   NuxtPage
 </template>
 
@@ -71,6 +71,16 @@ onMounted(() => {
 </script>
 
 <style>
+/** 去除链接默认下划线 */
+a {
+  text-decoration: none;
+}
+
+/** 全局字体 */
+body {
+  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
+}
+
 /** 全局滚动条取消空间占用, 防止渲染时闪烁 */
 ::-webkit-scrollbar {
   display: none;

nuxt.config.ts

@@ -1,9 +1,7 @@
 import { defineNuxtConfig } from 'nuxt/config'
-import { PugExtractor } from 'vite-plugin-windicss'
 
-// https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['nuxt-windicss'],
+  modules: ['@unocss/nuxt'],
   app: {
     head: {
       title: 'satori',
@@ -12,16 +10,6 @@ export default defineNuxtConfig({
       ]
     },
   },
-  windicss: {
-    config: {
-      extract: {
-        extractors: [{
-          extractor: PugExtractor,
-          extensions: ['vue', 'pug'],
-        }]
-      },
-    },
-  },
   nitro: {
     storage: {
       blog: {
@@ -51,5 +39,6 @@ export default defineNuxtConfig({
         clientPort: 3000
       }
     }
-  }
+  },
+  compatibilityDate: '2025-02-25'
 })

package.json

@@ -8,11 +8,13 @@
     "update": "ssh satori 'cd satori; git pull; npm i; npm run build; pm2 restart satori'"
   },
   "devDependencies": {
+    "@unocss/extractor-pug": "^66.0.0",
+    "@unocss/nuxt": "^66.0.0",
     "@vue/compiler-sfc": "^3.3.4",
-    "nuxt": "3.7.4",
-    "nuxt-windicss": "^2.6.0",
+    "nuxt": "3.15.4",
     "pug": "^3.0.2",
-    "vite-plugin-windicss": "^1.9.3"
+    "pug-plain-loader": "^1.1.0",
+    "unocss": "^66.0.0"
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.0",

pages/blog/index.vue

@@ -56,7 +56,7 @@ div.container.mx-auto.py-24.flex.gap-8.w-full(
               span.mr-4 {{ content }}
               time.text-xs(:datetime="updatedAt || createdAt") {{ date }}
   // 右侧栏(aside)
-  aside.w-64.py-2.flex.flex-col.gap-8(class="<sm:hidden")
+  aside.w-64.py-2.flex.flex-col.gap-8
     div(v-if="!tagPending && tags.length")
       span.font-bold # TAG
       ul.flex.flex-wrap.gap-2.py-1
@@ -68,7 +68,7 @@ div.container.mx-auto.py-24.flex.gap-8.w-full(
       span.font-bold # 归档
       template(v-for="item in data.filter(x => x.title)" :key="item.id")
         NuxtLink.block.truncate(
-          class="hover:text-pink-500"
+          class="text-dark-600 hover:text-pink-500 visited:text-gray-500"
           :to="`/blog/${item.id}`"
         ) {{ item.title }}
   // 弹出层编辑器(编辑日志)

pages/index.vue

@@ -1,4 +1,4 @@
 <template lang="pug">
 main.container.mx-auto.h-screen.flex.justify-center.align-center.items-center
-    div.text-red-100.text-8xl.cursor-pointer satori
+    div.text-red-100.text-8xl.cursor-pointer.ma3 satori
 </template>

server/api/gallery/[id].[format].js

@@ -19,6 +19,8 @@ export default defineEventHandler(async event => {
     if (event.node.req.method === 'GET') {
         const file_name = decodeURI(event.context.params.id)
         const file_path = path.resolve(dirPath, file_name)
+        const width = parseInt(event.node.req.query.w)
+        const format = event.context.params.format
 
         // 检查文件是否存在
         if (!fs.existsSync(file_path)) {

server/api/gallery/index.js

@@ -13,6 +13,7 @@ if (!fs.existsSync(dirPath)) {
 }
 
 export default defineEventHandler(async event => {
+
     // 处理 GET 请求(读取image中的图片文件列表)
     if (event.node.req.method === 'GET') {
         const files = await fs.promises.readdir(dirPath)
@@ -30,6 +31,7 @@ export default defineEventHandler(async event => {
 
         return { list }
     }
+
     // 处理 POST 请求(FromData上传图片)
     if (event.node.req.method === 'POST') {
         const form = formidable({ multiples: true, uploadDir: dirPath })
@@ -55,4 +57,5 @@ export default defineEventHandler(async event => {
 
         return { list }
     }
+
 })

uno.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, presetWind3, presetWebFonts } from 'unocss'
+import extractorPug from '@unocss/extractor-pug'
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetWebFonts({
+      fonts: {
+        sans: 'Roboto',
+        mono: ['Fira Code', 'Fira Mono:400,700']
+      }
+    })
+  ],
+  extractors: [
+    extractorPug(),
+  ],
+})