重写 ai 对话网站

前言

前两天没事干，下午又要去练科三，上午就干脆重写对话小网站了。用的还是 nuxt，不过这次配置了 PWA。nuxt 配置 pwa 跟 vite+vue 有点不太一样。

代码放在这里，网站在这里。代码依旧很屎，如果想看的话可以看一下。

给 nuxt 应用配置 PWA

首先需要安装@vite-pwa/nuxt

pnpm add -D @vite-pwa/nuxt

然后跟 vite 一样，再 nuxt.config.ts 里加 pwa 的配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // 其它配置
  modules: ['@vite-pwa/nuxt'],
  pwa: {
    registerType: 'autoUpdate',
    includeAssets: ['favicon.ico', 'robots.txt', 'apple-touch-icon.png'],
    manifest: {
      name: '水ai对话网站',
      short_name: 'ai对话',
      description: '免费的ai对话网站',
      theme_color: '#000000',
      icons: [
        {
          src: '/icon-192x192.webp',
          sizes: '192x192',
          type: 'image/webp',
        },
        {
          src: '/icon-512x512.webp',
          sizes: '512x512',
          type: 'image/webp',
        },
      ],
    },
    workbox: {
      runtimeCaching: [
        {
          urlPattern: /\.(?:js|css|png|jpg|jpeg|svg|webp)$/,
          handler: 'CacheFirst',
          options: {
            cacheName: 'static-resources',
            expiration: {
              maxEntries: 100,
              maxAgeSeconds: 2592000, // 30 天
            },
          },
        },
      ],
    },
    devOptions: {
      enabled: false,
      type: 'module',
    },
  },
})

workbox 也与 vite 一样，这里就不重复了。

然后可能会遇到一个问题，就是 service worker 跑起来了，但是 PWA 没有跑起来，会发现清单是空的，index.html 的 head 里也没有。我不知道是我的问题还是这个库确实不会自动插入，反正我是需要手动插入的。在 nuxt.config.ts 里改就可以了。

export default defineNuxtConfig({
  app: {
    head: {
      title: '水ai对话',
      link: [{ rel: 'manifest', href: '/manifest.webmanifest' }],
    },
  },
  // 其它配置
})

这样就插入了 manifest 了。

UnoCSS 初体验

怎么说呢，之前用过 tailwindcss，之后看推荐说 UnoCSS，这次就用了 UnoCSS，感觉还是挺好的。

在类名方面 tailwindcss 和 UnoCSS 基本没什么区别，类名基本都一样。UnoCSS 有一个东西我很喜欢，一般在用 tailwindcss 的时候，经常可能会写一大坨 class，第一次写可能很清楚，之后再看大概率就会很痛苦了，一大串在那里不知道什么效果。但是如果用 UnoCSS 的话，它有个选项presetAttributify，这个感觉相当好用，大概就是相同前缀可以写在一起。比如

<div class="px-2 py-4 mx-2 my-4 flex flex-row bg-black"></div>

可以写成

<div p="x-2 y-4" m="x-2 y-4" flex="~ row" bg="black"></div>

这里如果是一模一样的话，可以用~来表示。flex="~ row"相当于class="flex flex-row"

对于一些可能就一个没啥必要分的，也可以继续写成 class。这样分开来写感觉可读性比之前要高。

展开栏与收缩栏

某个特效可能挺常见的，就是鼠标放在头像或者别的什么地方上面就会出现一个框，里面就有一些选项，可以去点。鼠标移开框就会消失。这个就可以用 hover 来实现。

但是用 hover 有一个问题，就是触屏端不能很好的适配，这个就可以用 active 了。之前写学院集市的时候没想起这个，直接用 js 控制了。

<div class="group position-relative" m="r-2">
  <img class="w-16 h-16 object-fill rounded-full" src="/head.webp" alt="我" />
  <div
    class="z-10 hidden position-absolute -translate-x-1/2"
    group-hover="block bg-dark text-gray"
    group-active="block bg-dark text-gray"
    w="20"
    p="2"
    rounded="lg"
  >
    <div class="my-1">
      <a href="https://www.w4ter.com" target="_blank" class="text-gray" hover="text-blue">我的博客</a>
    </div>
    <hr />
    <div class="my-1">
      <a href="https://www.w4ter.com" target="_blank" class="text-gray" hover="text-blue">支持一下</a>
    </div>
  </div>
</div>

这样的话，当我鼠标悬浮在头像，或者触屏点击头像时，就会显示这个框。这里hover和active也是可以提出来的，非常方便（个人感觉）。

第一次使用图标库

之前都是用文字来描述各种东西，没多少图片。原本想着用UnoCSS的图标的，但是不知道为什么一直用不了，干脆用了nuxt-icon。这次找到一个图标网站，感觉挺全的，这里。

后续的更新

怎么说呢，这个月的话由于前十几天基本在复习/考试，中间几天在跟同学玩，后面几天在练车，今天考科三，一直没更新。也有不知道写啥的原因吧。之后的话我可能会写一个vitepress主题，感觉用别人的还是不太爽，并不是说别人的不好看，只是想用自己的而已，我只是单纯的犯贱。

大概有这么个想法，如果要取名字的话我大概会叫心语，跟任何现实人物无关，如果不小心同音/同名纯属巧合。