重写 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主题，感觉用别人的还是不太爽，并不是说别人的不好看，只是想用自己的而已，我只是单纯的犯贱。

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