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/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,17 +1,37 @@
 <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>
     </view>
-    
+
     <view class="header" :style="{ paddingTop: safeAreaTop + 20 + 'px' }">
       <view class="header-left">
         <view class="logo-box">
           <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>
@@ -21,7 +41,7 @@
         </view>
       </view>
     </view>
-    
+
     <scroll-view class="page-content" scroll-y>
       <view v-if="activeTab === 'record'" class="tab-page">
         <RecordView></RecordView>
@@ -35,7 +55,10 @@
         <PathView></PathView>
       </view>
     </scroll-view>
-    
+
+    <!-- 全局音乐播放器 -->
+    <MusicPlayer ref="musicPlayer" />
+
     <view class="bottom-nav" :style="{ paddingBottom: safeAreaBottom + 'px' }">
       <view
         class="nav-item"
@@ -71,20 +94,44 @@ 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
   safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
-  
+
   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 {