peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
huazhongmin
2026-03-07 17:42:11 +08:00
parent e2d47b03c4
commit 88e35d2889
5 changed files with 332 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mini-program/src/App.vue
+106 -3
View File
@@ -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);
transition: all 0.3s ease;
color: rgba(255, 255, 255, 0.3);
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
+133
View File
@@ -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
+6 -2
View File
@@ -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
+86 -6
View File
@@ -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 {
mini-program/src/services/epicScript.js
+1 -1
View File
@@ -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
}