feat(mini-program): UI 优化和功能增强

- 更新全局样式（App.vue），优化玻璃态效果和颜色系统
- 添加星空背景动画效果
- 添加全局音乐播放器组件
- 优化 RecordView 记录页样式
- 修复 epicScript.js 中 selectScript 函数的参数格式
- 与原型设计和 Web 端 API 保持一致

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

mini-program/src/App.vue

@@ -39,6 +39,37 @@ page {
   padding-bottom: 0;
 }
 
+/* 星空背景 */
+.stars-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.star {
+  position: absolute;
+  background: white;
+  border-radius: 50%;
+  opacity: var(--opacity);
+  animation: float-star var(--duration) ease-in-out infinite;
+  animation-delay: var(--delay);
+}
+
+@keyframes float-star {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+    opacity: var(--opacity);
+  }
+  50% {
+    transform: translate(var(--x), var(--y)) scale(1.5);
+    opacity: 1;
+  }
+}
+
 .status-bar-space {
   width: 100%;
   background: transparent;
@@ -67,6 +98,7 @@ page {
   background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
   border: 1px solid rgba(168, 85, 247, 0.3);
   border-radius: 32rpx;
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
 }
 
 .glass-input {
@@ -91,6 +123,7 @@ page {
   font-size: 30rpx;
   border: none;
   box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
+  transition: all 0.2s ease;
 }
 
 .btn-primary:active {
@@ -98,6 +131,11 @@ page {
   opacity: 0.9;
 }
 
+.btn-primary:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
 .btn-secondary {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
@@ -115,13 +153,14 @@ page {
 }
 
 .nav-item {
-  color: rgba(255, 255, 255, 0.4);
+  color: rgba(255, 255, 255, 0.3);
-  transition: all 0.3s ease;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }
 
 .nav-item.active {
   color: #C084FC;
   transform: translateY(-8rpx);
+  text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
 }
 
 .step-indicator {
@@ -134,7 +173,7 @@ page {
   height: 8rpx;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 4rpx;
-  transition: all 0.4s ease;
+  transition: all 0.7s ease;
 }
 
 .step-dot.active {
@@ -150,11 +189,49 @@ page {
   padding: 12rpx 24rpx;
   font-size: 22rpx;
   color: rgba(243, 232, 255, 0.8);
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(8rpx);
+  transition: all 0.2s ease;
 }
 
 .hint-chip:active {
   background: rgba(168, 85, 247, 0.2);
   border-color: rgba(168, 85, 247, 0.4);
+  transform: scale(1.05);
+  box-shadow: 0 8rpx 15rpx rgba(168, 85, 247, 0.3);
+}
+
+.ai-reply-card {
+  background: rgba(168, 85, 247, 0.08);
+  border: 1px solid rgba(168, 85, 247, 0.2);
+  border-radius: 20rpx;
+  padding: 24rpx;
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
+}
+
+.typing-text {
+  overflow: hidden;
+  white-space: pre-wrap;
+  animation: reveal 2s steps(60, end);
+}
+
+@keyframes reveal {
+  from { opacity: 0; transform: translateY(10rpx); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.starlight-loader {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 50%;
+  border: 2rpx solid #A855F7;
+  border-top-color: transparent;
+  animation: spin 0.8s infinite linear;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
 }
 
 ::-webkit-scrollbar {
@@ -166,6 +243,10 @@ page {
   border-radius: 10rpx;
 }
 
+::-webkit-scrollbar-track {
+  background: rgba(168, 85, 247, 0.05);
+}
+
 @keyframes fadeIn {
   from { opacity: 0; transform: translateY(20rpx); }
   to { opacity: 1; transform: translateY(0); }
@@ -184,16 +265,38 @@ page {
   animation: pulse 6s ease-in-out infinite;
 }
 
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10rpx); }
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
 .text-primary { color: #A855F7; }
 .text-primary-light { color: #C084FC; }
 .text-accent { color: #E879F9; }
 .text-muted { color: rgba(255, 255, 255, 0.4); }
+.text-white-90 { color: rgba(255, 255, 255, 0.9); }
+.text-white-70 { color: rgba(255, 255, 255, 0.7); }
+.text-white-50 { color: rgba(255, 255, 255, 0.5); }
 .font-serif { font-family: 'Cinzel', serif; }
 
 .bg-dark { background-color: #0F071A; }
 .bg-gradient-purple {
   background: linear-gradient(180deg, #1A0B2E 0%, #0F071A 50%, #050208 100%);
 }
+.bg-aurora-top {
+  background: rgba(168, 85, 247, 0.08);
+  filter: blur(120rpx);
+  border-radius: 50%;
+}
+.bg-aurora-bottom {
+  background: rgba(139, 92, 246, 0.05);
+  filter: blur(100rpx);
+  border-radius: 50%;
+}
 
 .safe-area-bottom {
   padding-bottom: constant(safe-area-inset-bottom);

mini-program/src/components/MusicPlayer.vue

@@ -0,0 +1,133 @@
+<template>
+  <view class="music-player" :style="{ bottom: bottomPosition }">
+    <view
+      class="music-toggle"
+      :class="{ playing: isPlaying }"
+      @click="toggleMusic"
+    >
+      <view class="music-disc" :class="{ spinning: isPlaying }"></view>
+      <text class="music-icon">🎵</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const isPlaying = ref(false)
+const bottomPosition = ref('180rpx')
+const audioContext = null
+let audioInstance = null
+
+// 背景音乐 URL - 使用原型中的音乐
+const MUSIC_URL = 'https://v3b.fal.media/files/b/0a8c9a0b/rStj8V-2tCe6bVYpCCcLN_output.mp3'
+
+const initAudio = () => {
+  if (!audioInstance) {
+    audioInstance = uni.createInnerAudioContext()
+    audioInstance.src = MUSIC_URL
+    audioInstance.loop = true
+    audioInstance.autoplay = false
+
+    audioInstance.onError((err) => {
+      console.error('音乐播放失败:', err)
+      isPlaying.value = false
+    })
+
+    audioInstance.onEnded(() => {
+      isPlaying.value = false
+    })
+  }
+}
+
+const toggleMusic = async () => {
+  initAudio()
+
+  if (isPlaying.value) {
+    audioInstance.pause()
+  } else {
+    try {
+      await audioInstance.play()
+      isPlaying.value = true
+    } catch (err) {
+      console.error('音乐播放失败:', err)
+      isPlaying.value = false
+    }
+  }
+}
+
+onMounted(() => {
+  const systemInfo = uni.getSystemInfoSync()
+  const safeAreaBottom = systemInfo.safeAreaInsets?.bottom || 0
+  bottomPosition.value = `${safeAreaBottom + 96}px`
+})
+
+onUnmounted(() => {
+  if (audioInstance) {
+    audioInstance.stop()
+    audioInstance.destroy()
+  }
+})
+
+defineExpose({
+  toggleMusic,
+  isPlaying
+})
+</script>
+
+<style scoped>
+.music-player {
+  position: fixed;
+  right: 16rpx;
+  z-index: 1000;
+}
+
+.music-toggle {
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
+  transition: all 0.3s ease;
+  opacity: 0.4;
+}
+
+.music-toggle:active {
+  transform: scale(0.95);
+  opacity: 0.6;
+}
+
+.music-toggle.playing {
+  opacity: 1;
+  border-color: rgba(168, 85, 247, 0.5);
+  box-shadow: 0 0 30rpx rgba(168, 85, 247, 0.3);
+}
+
+.music-disc {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 1px solid rgba(168, 85, 247, 0.2);
+  transition: all 0.3s ease;
+}
+
+.music-disc.spinning {
+  animation: spin 3s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.music-icon {
+  font-size: 36rpx;
+  z-index: 1;
+}
+</style>

mini-program/src/pages/main/RecordView.vue

@@ -189,8 +189,10 @@ onMounted(() => {
 .save-btn {
   width: 100%;
   height: 88rpx;
-  background: linear-gradient(90deg, rgba(147, 51, 234, 0.4), rgba(124, 58, 237, 0.4));
+  background: linear-gradient(135deg, rgba(147, 51, 234, 0.4), rgba(124, 58, 237, 0.4));
   border: 1px solid rgba(168, 85, 247, 0.3);
+  border-radius: 32rpx;
+  box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.2);
 }
 
 .save-btn.disabled {
@@ -235,9 +237,11 @@ onMounted(() => {
 
 .ai-reply {
   background: rgba(168, 85, 247, 0.08);
-  border: 1px solid rgba(168, 85, 247, 0.2);
+  border: 1px solid rgba(168, 85, 247, 0.25);
   border-radius: 20rpx;
   padding: 24rpx;
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
+  margin-top: 16rpx;
 }
 
 .ai-header {

mini-program/src/pages/main/index.vue

@@ -1,5 +1,25 @@
 <template>
   <view class="main-page">
+    <!-- 星空背景 -->
+    <view class="stars-container">
+      <view
+        v-for="star in stars"
+        :key="star.id"
+        class="star"
+        :style="{
+          left: star.left + '%',
+          top: star.top + '%',
+          width: star.size + 'px',
+          height: star.size + 'px',
+          '--opacity': star.opacity,
+          '--x': star.xMove + 'px',
+          '--y': star.yMove + 'px',
+          '--duration': star.duration + 's',
+          '--delay': star.delay + 's'
+        }"
+      ></view>
+    </view>
+
     <view class="bg-decoration">
       <view class="aurora-top"></view>
       <view class="aurora-bottom"></view>
@@ -11,7 +31,7 @@
           <image class="logo" src="/static/logo.svg" mode="aspectFit" />
         </view>
         <view class="brand">
-          <text class="brand-title font-serif">人生OS</text>
+          <text class="brand-title font-serif">人生 OS</text>
           <text class="brand-subtitle">LIFE HARMONY v3.1</text>
         </view>
       </view>
@@ -36,6 +56,9 @@
       </view>
     </scroll-view>
 
+    <!-- 全局音乐播放器 -->
+    <MusicPlayer ref="musicPlayer" />
+
     <view class="bottom-nav" :style="{ paddingBottom: safeAreaBottom + 'px' }">
       <view
         class="nav-item"
@@ -71,13 +94,35 @@ import { useAppStore } from '../../stores/app.js'
 import RecordView from './RecordView.vue'
 import ScriptView from './ScriptView.vue'
 import PathView from './PathView.vue'
+import MusicPlayer from '../../components/MusicPlayer.vue'
 
 const store = useAppStore()
 const activeTab = ref('record')
+const musicPlayer = ref(null)
 
 const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
 const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
 
+// 星空背景数据
+const stars = ref([])
+
+const initStars = () => {
+  stars.value = []
+  for (let i = 0; i < 60; i++) {
+    stars.value.push({
+      id: i,
+      size: Math.random() * 3 + 1,
+      left: Math.random() * 100,
+      top: Math.random() * 100,
+      opacity: 0.2 + Math.random() * 0.5,
+      xMove: (Math.random() - 0.5) * 100,
+      yMove: (Math.random() - 0.5) * 100,
+      duration: 15 + Math.random() * 20,
+      delay: Math.random() * -20
+    })
+  }
+}
+
 onMounted(() => {
   const systemInfo = uni.getSystemInfoSync()
   safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
@@ -85,6 +130,8 @@ onMounted(() => {
 
   store.initialize()
   uni.$on('switchTab', switchTab)
+
+  initStars()
 })
 
 const userAvatar = computed(() => {
@@ -114,10 +161,42 @@ const goToProfile = () => {
   flex-direction: column;
 }
 
+/* 星空背景 */
+.stars-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.star {
+  position: absolute;
+  background: white;
+  border-radius: 50%;
+  opacity: var(--opacity);
+  animation: float-star var(--duration) ease-in-out infinite;
+  animation-delay: var(--delay);
+}
+
+@keyframes float-star {
+  0%, 100% {
+    transform: translate(0, 0) scale(1);
+    opacity: var(--opacity);
+  }
+  50% {
+    transform: translate(var(--x), var(--y)) scale(1.5);
+    opacity: 1;
+  }
+}
+
 .bg-decoration {
   position: absolute;
   inset: 0;
   pointer-events: none;
+  z-index: 1;
 }
 
 .aurora-top {
@@ -246,13 +325,14 @@ const goToProfile = () => {
   gap: 6rpx;
   padding: 16rpx 32rpx;
   color: rgba(255, 255, 255, 0.4);
-  transition: all 0.3s ease;
+  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
   min-width: 160rpx;
 }
 
 .nav-item.active {
   color: #C084FC;
   transform: translateY(-8rpx);
+  text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
 }
 
 .nav-icon {

mini-program/src/services/epicScript.js

@@ -33,7 +33,7 @@ export const updateScript = async (scriptData) => {
 }
 
 export const selectScript = async (id) => {
-  const response = await put('/epicScript/select', null, { params: { id } })
+  const response = await put('/epicScript/select', { id })
   return response
 }