feat(ui): 实现ACG风格UI改造和动画效果

添加樱花飘落和表情点击特效组件，优化卡片动画和背景模糊效果
更新主题色为粉色并添加动漫风格背景图
引入圆角字体提升可爱风格
新增开发文档记录改造计划

.trae/documents/ACG Animation Enhancement Plan.md

@@ -0,0 +1,24 @@
+I will implement several interactive animations and visual enhancements to meet the user's request for a "prettier" and more "animated" ACG-style blog.
+
+### 1. Emoji Click Burst Effect
+I will create a new component `EmojiCursor.astro` that listens for click events and spawns floating emojis that fade out.
+- **Implementation**: A client-side script that creates `span` elements with random emojis at the cursor position, animates them upwards, and removes them.
+- **Emojis**: 🌸, 💖, ✨, 🍬, 🎀, 🍭, 🍡 (ACG/cute themed).
+
+### 2. Falling Sakura (Cherry Blossom) Effect
+I will create a `Sakura.astro` component using a lightweight canvas script to simulate falling cherry blossom petals.
+- **Placement**: A fixed-position canvas covering the screen, with `pointer-events: none` so it doesn't interfere with clicks.
+- **Visuals**: Pink/White petals gently drifting down.
+
+### 3. Fade-in & Slide-up Animations
+I will add global CSS keyframes to `src/styles/main.css` to animate elements when they appear.
+- **Target**: `.card-base`, `.btn-card`
+- **Effect**: `fade-in-up` (opacity 0 -> 1, translate-y 20px -> 0).
+- **Stagger**: I'll try to use CSS nth-child selectors or a simple JS script to stagger the animation for a cascading effect.
+
+### 4. Integration
+I will import `EmojiCursor` and `Sakura` components into `src/layouts/Layout.astro` so they are available on every page.
+
+### 5. Polishing
+- **Live2D Suggestion**: I will add a comment/placeholder for Live2D in the layout, as a full implementation might be heavy, but I'll focus on the requested "emoji animations" first.
+- **Link Hover**: Add a "rubber band" or "pulse" animation to navigation links.

.trae/documents/ACG Style UI Makeover Plan.md

@@ -0,0 +1,20 @@
+I will modify the project's configuration and CSS to implement an "ACG (Anime/Manga) Style" makeover. The changes will make the UI cuter, softer, and more translucent with an anime-style background.
+
+### 1. Global Theme Configuration (`src/config.ts`)
+- **Theme Color**: Change the primary hue to **Pink** (`340`) for a soft, cute look.
+- **Background Image**: Enable the background and set it to a high-quality random anime wallpaper API (`https://t.alcy.cc/acg`) to ensure every visit feels fresh and "ACG".
+- **Background Opacity**: Ensure the background is fully visible (`opacity: 1`).
+
+### 2. Styling Overhaul (`src/styles/variables.styl` & `src/styles/main.css`)
+- **Rounded Corners**: Increase the global border radius (`--radius-large`) to `1.75rem` to make all cards and elements look bubblier and softer.
+- **Translucency (Glassmorphism)**:
+  - Reduce the opacity of the **Card Background** (`--card-bg`) and **Float Panel** (`--float-panel-bg`) to `0.6` (60% opacity) for light mode.
+  - This creates a "frosted glass" effect, allowing the anime background to show through the content.
+- **Blur Effect**: Increase the `backdrop-filter` blur in `main.css` to `16px` to enhance the glass effect and ensure text readability.
+
+### 3. Typography (`src/layouts/Layout.astro` & `tailwind.config.cjs`)
+- **Cute Font**: Import the **"M PLUS Rounded 1c"** font from Google Fonts. This is a popular rounded font often used in anime/manga designs.
+- **Font Integration**: Update Tailwind configuration to prioritize this new rounded font for the entire website.
+
+### 4. Interactive Animations (`src/styles/main.css`)
+- **Hover Effects**: Add a gentle "floating" animation (slight lift and shadow increase) to all cards (`.card-base`) when hovered, making the interface feel more alive and playful.

src/components/widget/EmojiCursor.astro

@@ -0,0 +1,34 @@
+<script>
+  function createEmoji(e: MouseEvent) {
+    const emojis = ["🌸", "💖", "✨", "🍬", "🎀", "🍭", "🍡", "🐱", "🍥"];
+    const emoji = document.createElement("div");
+    emoji.innerText = emojis[Math.floor(Math.random() * emojis.length)];
+    emoji.style.position = "fixed";
+    emoji.style.left = e.clientX + "px";
+    emoji.style.top = e.clientY + "px";
+    emoji.style.fontSize = Math.random() * 20 + 10 + "px";
+    emoji.style.pointerEvents = "none";
+    emoji.style.userSelect = "none";
+    emoji.style.zIndex = "9999";
+    emoji.style.transition = "all 1s ease-out";
+    
+    // Initial randomness
+    const x = (Math.random() - 0.5) * 50;
+    const y = (Math.random() - 0.5) * 50;
+    
+    document.body.appendChild(emoji);
+
+    // Animate
+    requestAnimationFrame(() => {
+      emoji.style.transform = `translate(${x}px, ${y - 50}px)`;
+      emoji.style.opacity = "0";
+    });
+
+    // Cleanup
+    setTimeout(() => {
+      emoji.remove();
+    }, 1000);
+  }
+
+  document.addEventListener("click", createEmoji);
+</script>

src/components/widget/Sakura.astro

@@ -0,0 +1,104 @@
+<canvas id="sakura-canvas"></canvas>
+
+<style>
+  #sakura-canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+  }
+</style>
+
+<script>
+  // Sakura falling effect
+  const canvas = document.getElementById("sakura-canvas") as HTMLCanvasElement;
+  const ctx = canvas.getContext("2d");
+
+  let width = 0;
+  let height = 0;
+  let petals = [];
+
+  const resize = () => {
+    width = canvas.width = window.innerWidth;
+    height = canvas.height = window.innerHeight;
+  };
+
+  class Petal {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    opacity: number;
+    size: number;
+    rotation: number;
+    rotationSpeed: number;
+    color: string;
+
+    constructor() {
+      this.reset();
+    }
+
+    reset() {
+      this.x = Math.random() * width;
+      this.y = Math.random() * height - height;
+      this.vx = Math.random() * 1 + 0.5;
+      this.vy = Math.random() * 1 + 0.5;
+      this.opacity = Math.random() * 0.5 + 0.3;
+      this.size = Math.random() * 10 + 5;
+      this.rotation = Math.random() * 360;
+      this.rotationSpeed = (Math.random() - 0.5) * 2;
+      this.color = `rgba(255, 183, 197, ${this.opacity})`; // Sakura pink
+    }
+
+    update() {
+      this.x += this.vx;
+      this.y += this.vy;
+      this.rotation += this.rotationSpeed;
+
+      if (this.y > height) {
+        this.reset();
+        this.y = -20;
+      }
+      if (this.x > width) {
+        this.x = -20;
+      }
+    }
+
+    draw() {
+      if (!ctx) return;
+      ctx.save();
+      ctx.translate(this.x, this.y);
+      ctx.rotate((this.rotation * Math.PI) / 180);
+      ctx.fillStyle = this.color;
+      ctx.beginPath();
+      // Draw a simple petal shape
+      ctx.moveTo(0, 0);
+      ctx.bezierCurveTo(this.size / 2, -this.size / 2, this.size, 0, 0, this.size);
+      ctx.bezierCurveTo(-this.size, 0, -this.size / 2, -this.size / 2, 0, 0);
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+
+  const init = () => {
+    resize();
+    petals = Array.from({ length: 50 }, () => new Petal()); // 50 petals
+    animate();
+  };
+
+  const animate = () => {
+    if (!ctx) return;
+    ctx.clearRect(0, 0, width, height);
+    petals.forEach((petal) => {
+      petal.update();
+      petal.draw();
+    });
+    requestAnimationFrame(animate);
+  };
+
+  window.addEventListener("resize", resize);
+  init();
+</script>

src/config.ts

@@ -19,25 +19,23 @@ export const siteConfig: SiteConfig = {
   keywords: [],
   lang: "zh_CN", // 'en', 'zh_CN', 'zh_TW', 'ja', 'ko', 'es', 'th'
   themeColor: {
-    hue: 361, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
+    hue: 340, // Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
     fixed: false, // Hide the theme color picker for visitors
     forceDarkMode: false, // Force dark mode and hide theme switcher
   },
   banner: {
     enable: false,
     src: "/xinghui.avif", // Relative to the /src directory. Relative to the /public directory if it starts with '/'
-
     position: "center", // Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
     credit: {
       enable: true, // Display the credit text of the banner image
       text: "Pixiv @chokei", // Credit text to be displayed
-
       url: "https://www.pixiv.net/artworks/122782209", // (Optional) URL link to the original artwork or artist's page
     },
   },
   background: {
     enable: true, // Enable background image
-    src: "", // Background image URL (supports HTTPS)
+    src: "https://t.alcy.cc/acg", // Background image URL (supports HTTPS)
     position: "center", // Background position: 'top', 'center', 'bottom'
     size: "cover", // Background size: 'cover', 'contain', 'auto'
     repeat: "no-repeat", // Background repeat: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'

src/content/posts/开发日记/SpringCloud项目配合maven动态启用不同配置文件设计.md

@@ -0,0 +1,239 @@
+---
+title: 开发日记/SpringCloud项目配合maven动态启用不同配置文件设计
+published: 2026-01-11T12:53:19
+description: ''
+image: ''
+
+draft: false 
+lang: ''
+category: '开发日记'
+---
+
+## 背景
+
+在多模块（父工程 + 多个子模块）的 SpringCloud / SpringBoot 项目里，我们通常会有多套环境配置（dev/test/prod），比如：
+
+- 数据库、Redis、MQ 地址不同
+- Nacos / Config Server 的命名空间、group 不同
+- 日志级别、监控开关不同
+
+问题在于：**子模块是可独立启动的**，但它们的配置又希望能跟随父模块选择的 Maven Profile 自动切换，而不是每次都手动改 `application.yml` 或 IDE 的 VM Options。
+
+## 目标
+
+- 用 Maven Profile 统一管理环境（dev/test/prod），**一处配置，多模块复用**
+- 打包时根据 `-Pdev/-Pprod` 自动写入激活的 Spring Profile
+- 子模块的 `application.yml` 不硬编码环境，而是“动态注入”
+- 本地运行、CI 打包、Docker 部署都能保持同一套切换逻辑
+
+## 思路总览（核心点）
+
+1. **父模块（parent/pom.xml）用 `<profiles>` 维护环境变量**，比如 `profile.active=dev`、`config.server.url=...`
+2. **子模块开启资源过滤（resource filtering）**，让 `application.yml` 支持占位符替换
+3. `application.yml` 用占位符写 `spring.profiles.active`，让它随 Maven Profile 注入（例如 `@profile.active@`）
+4. 运行 / 打包时只需要切换 Maven Profile：`mvn -Pdev package`、`mvn -Pprod package`
+
+下面重点讲两件事：**父模块 profiles 怎么写**，以及 **子模块 application.yml 怎么实现动态配置**。
+
+## 父模块：Maven Profiles 统一管理环境
+
+在父模块 `pom.xml` 中定义环境 Profile（dev/test/prod），每个 profile 只负责两类事情：
+
+- 提供“环境变量”（properties）
+- 参与资源过滤（让子模块能读到这些变量）
+
+示例（父模块 `pom.xml`，只保留关键段落）：
+
+```xml
+<project>
+  <modelVersion>4.0.0</modelVersion>
+  <packaging>pom</packaging>
+
+  <properties>
+    <maven.resources.filtered>true</maven.resources.filtered>
+    <profile.active>dev</profile.active>
+  </properties>
+
+  <profiles>
+    <profile>
+      <id>dev</id>
+      <properties>
+        <profile.active>dev</profile.active>
+        <config.server.url>http://127.0.0.1:8888</config.server.url>
+      </properties>
+    </profile>
+
+    <profile>
+      <id>test</id>
+      <properties>
+        <profile.active>test</profile.active>
+        <config.server.url>http://test-config:8888</config.server.url>
+      </properties>
+    </profile>
+
+    <profile>
+      <id>prod</id>
+      <properties>
+        <profile.active>prod</profile.active>
+        <config.server.url>http://prod-config:8888</config.server.url>
+      </properties>
+    </profile>
+  </profiles>
+</project>
+```
+
+### 为什么把 Profile 写在父模块
+
+- 多模块下每个子模块都依赖 parent，**配置天然继承**
+- 切换环境只需控制父模块 profile，CI/CD 更好统一
+- 对团队协作友好：大家不需要各自维护一份“本地 dev 配置”
+
+### 使用方式（命令）
+
+```bash
+# dev 打包
+mvn -Pdev clean package
+
+# prod 打包
+mvn -Pprod clean package
+```
+
+在 IDE（例如 IntelliJ IDEA）里，也可以在 Maven 面板里勾选对应 profile，然后运行子模块的启动类即可（前提是子模块启用了资源过滤，后面会讲）。
+
+## 子模块：application.yml 如何实现动态配置
+
+核心就是一句话：**让 `application.yml` 里的值由 Maven 过滤替换**。
+
+### 1）子模块开启资源过滤（resource filtering）
+
+在子模块（或统一放在父模块的 `<build><pluginManagement>` 里让子模块继承）配置 resources 过滤。
+
+以子模块 `pom.xml` 为例（关键段落）：
+
+```xml
+<build>
+  <resources>
+    <resource>
+      <directory>src/main/resources</directory>
+      <filtering>true</filtering>
+    </resource>
+  </resources>
+</build>
+```
+
+这样 Maven 在 `process-resources` 阶段会对 `src/main/resources` 下的文件做占位符替换。
+
+### 2）在 application.yml 里引用父模块 Profile 变量
+
+在子模块 `src/main/resources/application.yml` 里写：
+
+```yaml
+spring:
+  profiles:
+    active: "@profile.active@"
+
+app:
+  config-server-url: "@config.server.url@"
+```
+
+这里用的是 Maven 的 `@...@` 占位符格式（它比 `${...}` 在 YAML 中更不容易和 Spring 本身的占位符混淆）。
+
+当你执行：
+
+```bash
+mvn -Pprod clean package
+```
+
+打包后的 `target/classes/application.yml` 会变成：
+
+```yaml
+spring:
+  profiles:
+    active: "prod"
+
+app:
+  config-server-url: "http://prod-config:8888"
+```
+
+### 3）配合多套配置文件：application-{profile}.yml
+
+建议把“环境差异”尽量放到 `application-dev.yml` / `application-prod.yml` 中，让 `application.yml` 只负责“选择环境”与公共配置。
+
+结构示例：
+
+```text
+src/main/resources/
+  application.yml
+  application-dev.yml
+  application-test.yml
+  application-prod.yml
+```
+
+`application.yml`（只写公共 + 激活环境）：
+
+```yaml
+spring:
+  profiles:
+    active: "@profile.active@"
+
+server:
+  port: 8080
+```
+
+`application-dev.yml`（写 dev 差异）：
+
+```yaml
+spring:
+  datasource:
+    url: jdbc:mysql://127.0.0.1:3306/app_dev
+```
+
+`application-prod.yml`（写 prod 差异）：
+
+```yaml
+spring:
+  datasource:
+    url: jdbc:mysql://prod-db:3306/app_prod
+```
+
+这样一来：**父模块 Maven Profile 决定 `spring.profiles.active`**，SpringBoot 再根据 active profile 自动加载对应的 `application-{profile}.yml`。
+
+## 常见坑与建议
+
+### 1）本地直接运行为什么不生效
+
+`@profile.active@` 只会在 **Maven 资源处理** 时被替换。
+
+如果你直接用 IDE “运行启动类”，但没有触发 Maven 的 `process-resources`，就会出现占位符未替换的情况。
+
+推荐做法：
+
+- 在 IDE 使用 Maven Profile，并确保运行前执行了 `process-resources`（常见方式是先 `mvn -Pdev -DskipTests package` 一次）
+- 或者在 Run Configuration 里临时加 `-Dspring.profiles.active=dev`（但这会绕过“父模块统一管理”，不建议作为团队默认方案）
+
+### 2）过滤导致 application.yml 被破坏
+
+如果你在 `application.yml` 里本身也使用 `${...}`（比如 Spring 的占位符），Maven 过滤可能会误处理。
+
+建议：
+
+- 用 `@...@` 作为 Maven 注入占位符
+- Spring 自己的占位符继续用 `${...}`，避免混用
+
+### 3）CI/CD 建议
+
+CI 里只需要：
+
+```bash
+mvn -Pprod clean package -DskipTests
+```
+
+产物里 profile 已经写死为 prod，运行时不需要额外设置。
+
+如果你希望“同一包多环境运行”，那就不要在构建期写死 `spring.profiles.active`，改为运行期用环境变量/启动参数控制（这是另一条路线，和本文目标不同）。
+
+## 小结
+
+- 父模块 `<profiles>` 用来统一维护环境变量（重点：`profile.active`）
+- 子模块开启资源过滤，让 `application.yml` 能读取父模块的变量
+- `application.yml` 用 `spring.profiles.active: "@profile.active@"` 达到“动态切换配置”的效果

src/content/posts/开发日记/记一次springcloud项目启动显示端口被占用但是查不到占用进程的问题.md

@@ -6,6 +6,7 @@ image: ''
 
 draft: false 
 lang: ''
+category: '开发日记'
 ---
 
 # 开发日记/记一次springcloud项目启动显示端口被占用但是查不到占用进程的问题

src/layouts/Layout.astro

@@ -6,6 +6,8 @@ import "@fontsource/roboto/700.css";
 
 import { profileConfig, siteConfig } from "@/config";
 import ConfigCarrier from "@components/ConfigCarrier.astro";
+import Sakura from "@components/widget/Sakura.astro";
+import EmojiCursor from "@components/widget/EmojiCursor.astro";
 import {
   AUTO_MODE,
   BANNER_HEIGHT,
@@ -91,6 +93,9 @@ const bannerOffset =
   <!-- 手机端适配 -->
 
   <head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700&display=swap" rel="stylesheet">
     <title>{pageTitle}</title>
 
     <meta charset="UTF-8" />
@@ -357,6 +362,8 @@ const bannerOffset =
     data-overlayscrollbars-initialize
   >
     <div id="bg-box"></div>
+    <Sakura />
+    <EmojiCursor />
     <ConfigCarrier />
     <slot />
 

src/styles/main.css

@@ -2,9 +2,24 @@
 
 @layer components {
     .card-base {
-        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
+        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition duration-300;
-        backdrop-filter: blur(12px);
+        backdrop-filter: blur(16px);
-        -webkit-backdrop-filter: blur(12px);
+        -webkit-backdrop-filter: blur(16px);
+        animation: fade-in-up 0.6s ease-out backwards;
+    }
+    
+    @keyframes fade-in-up {
+        from {
+            opacity: 0;
+            transform: translateY(20px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    .card-base:hover {
+        @apply -translate-y-1 shadow-lg;
     }
     h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
         @apply transition;

src/styles/variables.styl

@@ -66,8 +66,8 @@ define({
   --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
   --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))
 
-  --float-panel-bg: rgba(255, 255, 255, 0.9) unquote("oklch(0.19 0.015 var(--hue) / 0.9)")
+  --float-panel-bg: rgba(255, 255, 255, 0.6) unquote("oklch(0.19 0.015 var(--hue) / 0.6)")
-  --float-panel-bg-transparent: rgba(255, 255, 255, 0.8) rgba(23, 23, 23, 0.8)
+  --float-panel-bg-transparent: rgba(255, 255, 255, 0.6) rgba(23, 23, 23, 0.6)
   --float-panel-bg-opaque: rgba(255, 255, 255, 1) unquote("oklch(0.19 0.015 var(--hue))")
 
   --scrollbar-bg-light: black(0.4)

tailwind.config.cjs

@@ -6,7 +6,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ["Roboto", "sans-serif", ...defaultTheme.fontFamily.sans],
+        sans: ["'M PLUS Rounded 1c'", "Roboto", "sans-serif", ...defaultTheme.fontFamily.sans],
       },
     },
   },