feat: 完成见素起名小程序核心功能

- 实现 AI 起名功能（Kimi API 接入）
- 添加用户收藏功能（MySQL 数据库）
- 实现海报生成与分享
- 添加音效和触觉反馈
- 配置生产环境部署（WAR 包 + Nginx）
- 支持多种起名模式（经典、诗词、自然、现代）
- 实现分批加载优化体验

miniprogram/pages/home/home.wxss

@@ -9,14 +9,67 @@ page {
   flex-direction: column;
   padding: 0 80rpx;
   overflow: hidden;
+  position: relative;
+}
+
+/* 水墨动画遮罩 */
+.ink-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+  background: transparent;
+}
+
+.ink-overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+.ink-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0;
+  height: 0;
+  background-color: #000000;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ink-overlay.active .ink-circle {
+  animation: inkSpread 1.8s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+}
+
+@keyframes inkSpread {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    width: 350vmax;
+    height: 350vmax;
+    opacity: 1;
+  }
 }
 
 .content {
-  margin-top: 35vh; 
+  margin-top: 30vh; 
   display: flex;
   flex-direction: column;
   align-items: center;
   animation: contentFadeIn 1.5s cubic-bezier(0.19, 1, 0.22, 1);
+  transition: opacity 0.5s ease;
+}
+
+.content.fade-out {
+  opacity: 0;
 }
 
 .title {
@@ -33,12 +86,61 @@ page {
   font-size: 22rpx;
   color: #D0D0D0;
   letter-spacing: 6rpx;
-  margin-bottom: 150rpx;
+  margin-bottom: 80rpx;
 }
 
+/* 模式选择器 */
+.mode-selector {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-bottom: 60rpx;
+  gap: 60rpx;
+}
+
+.mode-item {
+  font-size: 24rpx;
+  color: #B0B0B0;
+  letter-spacing: 4rpx;
+  padding: 10rpx 0;
+  position: relative;
+  transition: all 0.3s ease;
+}
+
+.mode-item.active {
+  color: #2D2D2D;
+}
+
+.mode-dot {
+  position: absolute;
+  bottom: -4rpx;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 6rpx;
+  height: 6rpx;
+  background-color: #2D2D2D;
+  border-radius: 50%;
+}
+
+/* 姓氏输入 */
+.surname-section {
+  width: 100%;
+  margin-bottom: 40rpx;
+}
+
+.surname-input {
+  width: 100%;
+  height: 80rpx;
+  text-align: center;
+  font-size: 32rpx;
+  color: #4A4A4A;
+  letter-spacing: 4rpx;
+}
+
+/* 关键词输入 */
 .input-section {
   width: 100%;
-  margin-bottom: 80rpx;
+  margin-bottom: 60rpx;
 }
 
 .keyword-input {
@@ -63,6 +165,7 @@ page {
   transition: width 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 
+.surname-section:focus-within .line,
 .input-section:focus-within .line {
   width: 80rpx;
   background-color: #2D2D2D;
@@ -75,16 +178,18 @@ page {
   margin-top: 40rpx;
 }
 
+/* 全黑背景、无圆角、加宽字间距的按钮 */
 .generate-btn {
-  background: none !important;
-  color: #A0A0A0 !important;
+  background-color: #1a1a1a !important;
+  color: #ffffff !important;
   font-size: 24rpx !important;
-  font-weight: 200 !important;
-  padding: 20rpx 60rpx !important;
-  letter-spacing: 12rpx !important;
-  text-indent: 12rpx !important;
-  transition: all 0.3s;
+  font-weight: 300 !important;
+  padding: 24rpx 80rpx !important;
+  letter-spacing: 16rpx !important;
+  text-indent: 16rpx !important;
+  transition: all 0.3s ease;
   border: none !important;
+  border-radius: 0 !important;
 }
 
 .generate-btn::after {
@@ -92,7 +197,7 @@ page {
 }
 
 .generate-btn:active {
-  color: #2D2D2D !important;
+  background-color: #333333 !important;
   transform: scale(0.98);
 }
 
@@ -103,6 +208,11 @@ page {
   right: 0;
   text-align: center;
   animation: footerFadeIn 3s ease-in;
+  transition: opacity 0.5s ease;
+}
+
+.footer.fade-out {
+  opacity: 0;
 }
 
 .footer text {
@@ -120,4 +230,4 @@ page {
   0% { opacity: 0; }
   70% { opacity: 0; }
   100% { opacity: 1; }
-}
+}