add raindrop background

.gitignore

@@ -60,4 +60,5 @@ cloudfunctions/**/*.log
 ehthumbs.db
 [Tt]humbs.db
 
+.claude/
 CLAUDE.md

miniprogram/components/background/raindrop/index.json

@@ -0,0 +1,4 @@
+{
+	"component": true,
+	"usingComponents": {}
+}

miniprogram/components/background/raindrop/index.less

@@ -0,0 +1,35 @@
+/* components/background/raindrop/index.wxss */
+page {
+	width: 100%;
+	height: 100%;
+	position: fixed;
+}
+
+.raindrops {
+	width: 100%;
+	height: 100%;
+	z-index: -1;
+	overflow: hidden;
+	position: absolute;
+	transform: rotate(3deg);
+
+	@keyframes rainFall {
+		from {
+			transform: translateY(-10px);
+		}
+	
+		to {
+			transform: translateY(100vh);
+		}
+	}
+
+	.raindrop {
+		top: 0;
+		width: 2px;
+		height: 30px;
+		opacity: .6;
+		position: absolute;
+		animation: rainFall linear infinite;
+		background: linear-gradient(180deg, transparent, var(--theme-content-rain));
+	}
+}

miniprogram/components/background/raindrop/index.ts

@@ -0,0 +1,59 @@
+// components/background/raindrop/index.ts
+import Toolkit from "../../../utils/Toolkit";
+
+interface Raindrop {
+	x: number;
+	length: number;
+	speed: number;
+}
+
+Component({
+
+	data: {
+		raindrops: [] as Raindrop[],
+		timer: undefined as number | undefined,
+		docWidth: 375,
+		docHeight: 667,
+	},
+
+	methods: {
+		createRaindrop() {
+			const raindrop = {
+				x: Toolkit.random(0, this.data.docWidth),
+				length: Toolkit.random(20, 40),
+				speed: Toolkit.random(1, 2)
+			};
+			this.setData({
+				raindrops: [...this.data.raindrops, raindrop]
+			});
+		}
+	},
+	lifetimes: {
+		attached() {
+			const systemInfo = wx.getWindowInfo();
+			this.setData({
+				docWidth: systemInfo.windowWidth,
+				docHeight: systemInfo.windowHeight,
+				timer: setInterval(() => {
+					this.createRaindrop();
+					if (60 < this.data.raindrops.length) {
+						if (this.data.timer) {
+							clearInterval(this.data.timer);
+						}
+						this.setData({
+							timer: undefined
+						})
+					}
+				}, 100)
+			});
+		},
+		detached() {
+			if (this.data.timer) {
+				clearInterval(this.data.timer);
+				this.setData({
+					timer: undefined
+				})
+			}
+		}
+	}
+})

miniprogram/components/background/raindrop/index.wxml

@@ -0,0 +1,9 @@
+<!--components/background/raindrop/index.wxml-->
+<view class="raindrops" style="width: {{docWidth}}px; height: {{docHeight}}px;">
+	<view
+		class="raindrop"
+		wx:for="{{raindrops}}"
+		wx:key="index"
+		style="left: {{item.x}}px; height: {{item.length}}px; animation-duration: {{item.speed}}s;"
+	></view>
+</view>

miniprogram/components/background/snowflake/index.less

@@ -1,14 +1,4 @@
 /* components/background/snow/index.wxss */
-@keyframes fall {
-	from {
-		transform: translateY(-10px) rotate(0);
-	}
-
-	to {
-		transform: translateY(100vh) rotate(1800deg);
-	}
-}
-
 page {
 	width: 100%;
 	height: 100%;
@@ -22,12 +12,22 @@ page {
 	overflow: hidden;
 	position: absolute;
 
+	@keyframes snowflakeFall {
+		from {
+			transform: translateY(-10px) rotate(0);
+		}
+	
+		to {
+			transform: translateY(100vh) rotate(1800deg);
+		}
+	}
+
 	.snowflake {
 		width: 10px;
 		height: 10px;
 		display: block;
 		position: absolute;
-		animation: fall linear infinite;
+		animation: snowflakeFall linear infinite;
 
 		&::before,
 		&::after {

miniprogram/theme.wxss

@@ -47,6 +47,9 @@ page {
 
 	/* === 视频播放按钮 === */
 	--theme-video-play: rgba(255, 255, 255, .9);
+
+	/* 内容颜色 */
+	--theme-content-rain: rgb(108, 221, 255, .7);
 }
 
 /* 深色模式变量 */
@@ -86,4 +89,7 @@ page[data-weui-theme="dark"] {
 
 	/* === 视频播放按钮 === */
 	--theme-video-play: rgba(200, 200, 200, .8);
+
+	/* 内容颜色 */
+	--theme-content-rain: rgba(235, 250, 255, .7);
 }