小程序初始化
This commit is contained in:
@@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<view class="login-page">
|
||||
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
|
||||
<view class="bg-decoration">
|
||||
<view class="aurora-top"></view>
|
||||
<view class="aurora-bottom"></view>
|
||||
</view>
|
||||
|
||||
<view class="content" :style="{ paddingTop: safeAreaTop + 20 + 'px' }">
|
||||
<view class="login-card">
|
||||
<view class="header">
|
||||
<text class="title font-serif">欢迎回来</text>
|
||||
<text class="subtitle">开启你的数字生命档案</text>
|
||||
</view>
|
||||
|
||||
<view class="form">
|
||||
<view class="input-group">
|
||||
<text class="input-label">手机号码</text>
|
||||
<input
|
||||
class="glass-input"
|
||||
type="number"
|
||||
maxlength="11"
|
||||
placeholder="输入手机号"
|
||||
v-model="phone"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="input-label">验证码</text>
|
||||
<view class="code-row">
|
||||
<input
|
||||
class="glass-input code-input"
|
||||
type="number"
|
||||
maxlength="6"
|
||||
placeholder="请输入验证码"
|
||||
v-model="code"
|
||||
/>
|
||||
<view
|
||||
class="code-btn"
|
||||
:class="{ disabled: isCountingDown || phone.length !== 11 }"
|
||||
@click="handleGetCode"
|
||||
>
|
||||
<text v-if="isCountingDown" class="countdown">{{ countdown }}s</text>
|
||||
<text v-else>获取验证码</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="btn-primary login-btn"
|
||||
:class="{ disabled: !canSubmit || loading }"
|
||||
@click="handleLogin"
|
||||
>
|
||||
<text v-if="loading">登录中...</text>
|
||||
<text v-else>开启旅程</text>
|
||||
</view>
|
||||
|
||||
<text class="agreement">
|
||||
登录即代表同意《用户协议》与《隐私政策》
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
import { getSmsCode } from '../../services/auth.js'
|
||||
|
||||
const store = useAppStore()
|
||||
|
||||
const statusBarHeight = ref(uni.getStorageSync('statusBarHeight') || 20)
|
||||
const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
|
||||
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
|
||||
|
||||
onMounted(() => {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = systemInfo.statusBarHeight || 20
|
||||
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
|
||||
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
|
||||
})
|
||||
|
||||
const phone = ref('')
|
||||
const code = ref('')
|
||||
const loading = ref(false)
|
||||
const countdown = ref(60)
|
||||
const isCountingDown = ref(false)
|
||||
|
||||
const canSubmit = computed(() => {
|
||||
return phone.value.length === 11 && code.value.length === 6
|
||||
})
|
||||
|
||||
const handleGetCode = async () => {
|
||||
if (isCountingDown.value || loading.value) return
|
||||
|
||||
if (phone.value.length !== 11) {
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await getSmsCode(phone.value)
|
||||
uni.showToast({ title: '验证码已发送', icon: 'success' })
|
||||
startCountdown()
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '验证码已发送 (模拟: 888888)', icon: 'none' })
|
||||
startCountdown()
|
||||
}
|
||||
}
|
||||
|
||||
const startCountdown = () => {
|
||||
isCountingDown.value = true
|
||||
countdown.value = 60
|
||||
|
||||
const timer = setInterval(() => {
|
||||
countdown.value--
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer)
|
||||
isCountingDown.value = false
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!canSubmit.value || loading.value) return
|
||||
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const result = await store.login(phone.value, code.value)
|
||||
|
||||
if (result.success) {
|
||||
if (result.hasProfile) {
|
||||
uni.redirectTo({ url: '/pages/main/index' })
|
||||
} else {
|
||||
uni.redirectTo({ url: '/pages/onboarding/index' })
|
||||
}
|
||||
} else {
|
||||
uni.showToast({ title: result.error || '登录失败', icon: 'none' })
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '登录失败', icon: 'none' })
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
height: constant(safe-area-inset-top);
|
||||
height: env(safe-area-inset-top);
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aurora-top {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 60%;
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
filter: blur(120rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.aurora-bottom {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
filter: blur(100rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
padding-top: calc(40rpx + constant(safe-area-inset-top));
|
||||
padding-top: calc(40rpx + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 100%;
|
||||
max-width: 720rpx;
|
||||
background: rgba(168, 85, 247, 0.05);
|
||||
backdrop-filter: blur(40rpx);
|
||||
border: 1px solid rgba(168, 85, 247, 0.15);
|
||||
border-radius: 48rpx;
|
||||
padding: 64rpx 40rpx;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: block;
|
||||
font-size: 48rpx;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
letter-spacing: 6rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.form {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.glass-input {
|
||||
width: 100%;
|
||||
height: 92rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24rpx;
|
||||
padding: 0 32rpx;
|
||||
color: #F3E8FF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.code-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16rpx;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
width: 220rpx;
|
||||
height: 92rpx;
|
||||
background: linear-gradient(135deg, rgba(147, 51, 234, 0.5), rgba(124, 58, 237, 0.4));
|
||||
border: 1px solid rgba(168, 85, 247, 0.4);
|
||||
border-radius: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
font-size: 22rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
letter-spacing: 2rpx;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.code-btn:active {
|
||||
transform: scale(0.97);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.code-btn.disabled {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.countdown {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
||||
border-radius: 32rpx;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.btn-primary.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.agreement {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.25);
|
||||
line-height: 1.6;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<view class="path-view">
|
||||
<text class="page-title">实现路径</text>
|
||||
|
||||
<view v-if="!selectedScript" class="empty-state glass-card">
|
||||
<text class="empty-icon">🗺️</text>
|
||||
<text class="empty-text">先生成剧本，方能洞察路径。</text>
|
||||
<button class="btn-secondary empty-btn" @click="goToScript">去生成剧本</button>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!currentPath" class="empty-state glass-card">
|
||||
<text class="empty-icon">🎯</text>
|
||||
<text class="empty-text">等待开启人生导航...</text>
|
||||
</view>
|
||||
|
||||
<view v-else class="path-content">
|
||||
<view class="target-card glass-card-gold">
|
||||
<text class="target-label">目标：{{ currentPath.title }}</text>
|
||||
<text class="target-summary">{{ (currentPath.description || currentPath.summary || currentPath.content || '').slice(0, 80) }}...</text>
|
||||
</view>
|
||||
|
||||
<view class="timeline">
|
||||
<view class="timeline-line"></view>
|
||||
|
||||
<view
|
||||
v-for="(step, index) in currentPath.steps"
|
||||
:key="index"
|
||||
class="timeline-item"
|
||||
>
|
||||
<view class="timeline-dot" :class="{ done: step.done }">
|
||||
<view class="dot-inner" :class="{ pulse: step.done }"></view>
|
||||
</view>
|
||||
|
||||
<view class="step-card glass-card" :class="{ done: step.done }">
|
||||
<text class="step-phase">节点 {{ index + 1 }}</text>
|
||||
<text class="step-task">{{ step.task }}</text>
|
||||
<text class="step-desc">{{ step.desc }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, watch } from 'vue'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
import * as lifePathService from '../../services/lifePath.js'
|
||||
|
||||
const store = useAppStore()
|
||||
|
||||
const pathData = ref(null)
|
||||
|
||||
const selectedScript = computed(() => {
|
||||
return store.scripts.find(s => s.isSelected)
|
||||
})
|
||||
|
||||
const currentPath = computed(() => {
|
||||
if (pathData.value) return pathData.value
|
||||
if (store.currentPath) return store.currentPath
|
||||
return null
|
||||
})
|
||||
|
||||
const loadPath = async (scriptId) => {
|
||||
if (!scriptId) return
|
||||
try {
|
||||
const res = await lifePathService.getPathByScriptId(scriptId)
|
||||
pathData.value = res.data || null
|
||||
store.setCurrentPath(pathData.value)
|
||||
} catch (error) {
|
||||
pathData.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const goToScript = () => {
|
||||
uni.$emit('switchTab', 'script')
|
||||
}
|
||||
|
||||
watch(selectedScript, (val) => {
|
||||
if (val?.id) {
|
||||
loadPath(val.id)
|
||||
} else {
|
||||
pathData.value = null
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (selectedScript.value?.id) {
|
||||
loadPath(selectedScript.value.id)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.path-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 120rpx 64rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 24rpx;
|
||||
color: rgba(192, 132, 252, 0.5);
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.empty-btn {
|
||||
font-size: 22rpx;
|
||||
padding: 18rpx 36rpx;
|
||||
}
|
||||
|
||||
.path-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48rpx;
|
||||
}
|
||||
|
||||
.target-card {
|
||||
padding: 40rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.target-label {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
color: #C084FC;
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.target-summary {
|
||||
display: block;
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48rpx;
|
||||
}
|
||||
|
||||
.timeline-line {
|
||||
position: absolute;
|
||||
left: 30rpx;
|
||||
top: 30rpx;
|
||||
bottom: 30rpx;
|
||||
width: 2rpx;
|
||||
background: linear-gradient(to bottom, #C084FC, rgba(192, 132, 252, 0.2), transparent);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.timeline-dot {
|
||||
position: absolute;
|
||||
left: -46rpx;
|
||||
top: 24rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
||||
background: #0F071A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.timeline-dot.done {
|
||||
border-color: #C084FC;
|
||||
box-shadow: 0 0 30rpx rgba(192, 132, 252, 0.4);
|
||||
}
|
||||
|
||||
.dot-inner {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dot-inner.done {
|
||||
background: #C084FC;
|
||||
}
|
||||
|
||||
.dot-inner.pulse {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.step-card {
|
||||
padding: 32rpx;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.step-card.done {
|
||||
opacity: 1;
|
||||
border-color: rgba(192, 132, 252, 0.3);
|
||||
}
|
||||
|
||||
.step-phase {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
color: #C084FC;
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.step-task {
|
||||
display: block;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.step-desc {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.5;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,277 @@
|
||||
<template>
|
||||
<view class="record-view">
|
||||
<view class="input-card glass-card">
|
||||
<view class="card-header">
|
||||
<view class="dot"></view>
|
||||
<text class="card-title">记叙当下</text>
|
||||
</view>
|
||||
|
||||
<input
|
||||
class="title-input"
|
||||
placeholder="为这段记忆命名"
|
||||
v-model="newEvent.title"
|
||||
/>
|
||||
|
||||
<picker class="date-picker" mode="date" :value="newEvent.time" @change="onDateChange">
|
||||
<view class="date-value">{{ newEvent.time || '选择日期' }}</view>
|
||||
</picker>
|
||||
|
||||
<textarea
|
||||
class="content-textarea"
|
||||
placeholder="此刻的心境或发生的事..."
|
||||
v-model="newEvent.content"
|
||||
rows="3"
|
||||
/>
|
||||
|
||||
<button
|
||||
class="btn-primary save-btn"
|
||||
:disabled="!canSave"
|
||||
:class="{ disabled: !canSave }"
|
||||
@click="saveEvent"
|
||||
>
|
||||
镌刻至星海
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="events-list">
|
||||
<view
|
||||
v-for="event in events"
|
||||
:key="event.id"
|
||||
class="event-card glass-card"
|
||||
>
|
||||
<view class="event-header">
|
||||
<text class="event-title">{{ event.title }}</text>
|
||||
<text class="event-date">{{ event.time }}</text>
|
||||
</view>
|
||||
|
||||
<text class="event-content">{{ event.content }}</text>
|
||||
|
||||
<view class="ai-reply">
|
||||
<view class="ai-header">
|
||||
<text class="ai-icon">✨</text>
|
||||
<text class="ai-title">Life Harmony AI</text>
|
||||
</view>
|
||||
<text class="ai-content" :class="{ typing: event.isNew }">
|
||||
{{ event.aiFeedback }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
|
||||
const store = useAppStore()
|
||||
|
||||
const newEvent = ref({
|
||||
title: '',
|
||||
time: getTodayDate(),
|
||||
content: ''
|
||||
})
|
||||
|
||||
const events = computed(() => store.events)
|
||||
|
||||
const canSave = computed(() => {
|
||||
return newEvent.value.title && newEvent.value.content
|
||||
})
|
||||
|
||||
function getTodayDate() {
|
||||
const today = new Date()
|
||||
return today.toISOString().split('T')[0]
|
||||
}
|
||||
|
||||
const onDateChange = (e) => {
|
||||
newEvent.value.time = e.detail.value
|
||||
}
|
||||
|
||||
const saveEvent = async () => {
|
||||
if (!canSave.value) return
|
||||
|
||||
const eventData = {
|
||||
...newEvent.value,
|
||||
aiFeedback: '星河守望者正在解读这段紫色波频...',
|
||||
isNew: true
|
||||
}
|
||||
|
||||
await store.createEvent(eventData)
|
||||
|
||||
newEvent.value = {
|
||||
title: '',
|
||||
time: getTodayDate(),
|
||||
content: ''
|
||||
}
|
||||
|
||||
setTimeout(async () => {
|
||||
const fullReply = `这段记忆碎片在星海中漾起涟漪。你在${eventData.title}中展现的特质，正在重新定义你人生OS的底层代码。继续保持这份觉知。`
|
||||
eventData.aiFeedback = fullReply
|
||||
eventData.isNew = false
|
||||
await store.fetchEvents()
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
store.fetchEvents()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.record-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.input-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: #C084FC;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 18rpx;
|
||||
color: rgba(192, 132, 252, 0.8);
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.title-input {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 28rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.title-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
font-size: 22rpx;
|
||||
color: rgba(168, 85, 247, 0.6);
|
||||
}
|
||||
|
||||
.content-textarea {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
background: transparent;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 26rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.content-textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: linear-gradient(90deg, rgba(147, 51, 234, 0.4), rgba(124, 58, 237, 0.4));
|
||||
border: 1px solid rgba(168, 85, 247, 0.3);
|
||||
}
|
||||
|
||||
.save-btn.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.events-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.event-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.event-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.event-date {
|
||||
font-size: 20rpx;
|
||||
color: rgba(168, 85, 247, 0.5);
|
||||
}
|
||||
|
||||
.event-content {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.ai-reply {
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
border: 1px solid rgba(168, 85, 247, 0.2);
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.ai-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.ai-icon {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.ai-title {
|
||||
font-size: 18rpx;
|
||||
color: rgba(192, 132, 252, 0.8);
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.ai-content {
|
||||
font-size: 22rpx;
|
||||
color: rgba(243, 232, 255, 0.8);
|
||||
font-style: italic;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.ai-content.typing {
|
||||
animation: typing 2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes typing {
|
||||
from { opacity: 0; transform: translateY(10rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<view class="script-view">
|
||||
<text class="page-title font-serif">剧本生成器</text>
|
||||
|
||||
<view class="section-card glass-card">
|
||||
<view class="section-header">
|
||||
<text class="section-title">我的基础人设</text>
|
||||
<text class="section-hint">可自由修改</text>
|
||||
</view>
|
||||
|
||||
<view class="profile-grid">
|
||||
<input
|
||||
class="glass-input"
|
||||
placeholder="姓名"
|
||||
v-model="nickname"
|
||||
/>
|
||||
<picker class="glass-picker" mode="selector" :range="zodiacOptions" :value="zodiacIndex" @change="onZodiacChange">
|
||||
<view class="picker-value">{{ registrationData.zodiac || '星座' }}</view>
|
||||
</picker>
|
||||
<picker class="glass-picker" mode="selector" :range="mbtiOptions" :value="mbtiIndex" @change="onMbtiChange">
|
||||
<view class="picker-value">{{ registrationData.mbti || 'MBTI' }}</view>
|
||||
</picker>
|
||||
<input
|
||||
class="glass-input"
|
||||
placeholder="职业"
|
||||
v-model="profession"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="section-card glass-card">
|
||||
<view class="input-group">
|
||||
<text class="label">剧本主题</text>
|
||||
<input
|
||||
class="glass-input"
|
||||
placeholder="如：巅峰重现、治愈之旅、赛博觉醒..."
|
||||
v-model="scriptConfig.theme"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<view class="npc-header">
|
||||
<text class="label">关键配角/新的人设</text>
|
||||
<button class="add-btn" @click="addNpc">+ 添加</button>
|
||||
</view>
|
||||
|
||||
<view class="npc-form">
|
||||
<input
|
||||
class="glass-input npc-input"
|
||||
placeholder="姓名"
|
||||
v-model="npcConfig.name"
|
||||
/>
|
||||
<picker class="glass-picker npc-picker" mode="selector" :range="npcRoleOptions" :value="npcRoleIndex" @change="onNpcRoleChange">
|
||||
<view class="picker-value">{{ npcConfig.role || '角色' }}</view>
|
||||
</picker>
|
||||
<picker class="glass-picker npc-picker" mode="selector" :range="npcRelationOptions" :value="npcRelationIndex" @change="onNpcRelationChange">
|
||||
<view class="picker-value">{{ npcConfig.relation || '关系' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<textarea
|
||||
class="glass-textarea"
|
||||
placeholder="自由描述TA的人设特点或关键剧情点..."
|
||||
v-model="npcConfig.desc"
|
||||
rows="2"
|
||||
/>
|
||||
|
||||
<view class="npc-list">
|
||||
<view
|
||||
v-for="(npc, index) in customNpcs"
|
||||
:key="index"
|
||||
class="npc-tag"
|
||||
>
|
||||
<text>{{ npc.name }} ({{ npc.role }})</text>
|
||||
<text class="delete-btn" @click="removeNpc(index)">×</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="params-row">
|
||||
<view class="param-group">
|
||||
<text class="param-label">叙事风格</text>
|
||||
<view class="param-options">
|
||||
<text
|
||||
v-for="style in scriptStyles"
|
||||
:key="style"
|
||||
class="param-option"
|
||||
:class="{ active: scriptConfig.style === style }"
|
||||
@click="scriptConfig.style = style"
|
||||
>
|
||||
{{ style }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="param-group">
|
||||
<text class="param-label">故事篇幅</text>
|
||||
<view class="param-options">
|
||||
<text
|
||||
v-for="length in scriptLengths"
|
||||
:key="length"
|
||||
class="param-option"
|
||||
:class="{ active: scriptConfig.length === length }"
|
||||
@click="scriptConfig.length = length"
|
||||
>
|
||||
{{ length }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button
|
||||
class="btn-primary generate-btn"
|
||||
:loading="isGenerating"
|
||||
:disabled="isGenerating || !scriptConfig.theme"
|
||||
@click="generateScript"
|
||||
>
|
||||
<text v-if="isGenerating">命运编织中...</text>
|
||||
<text v-else>生成平行人生剧本</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view v-if="scripts.length > 0" class="scripts-list">
|
||||
<view
|
||||
v-for="script in scripts"
|
||||
:key="script.id"
|
||||
class="script-card glass-card"
|
||||
:class="{ selected: script.isSelected }"
|
||||
>
|
||||
<view class="script-header">
|
||||
<text class="script-title">{{ script.title }}</text>
|
||||
<text class="script-persona">{{ script.theme || '追光者' }}</text>
|
||||
</view>
|
||||
|
||||
<text class="script-summary" lines="3">{{ getScriptSummary(script) }}</text>
|
||||
|
||||
<view class="script-footer">
|
||||
<text class="script-style">{{ script.style || '风格' }}</text>
|
||||
<button class="select-btn" @click="selectScript(script.id)">
|
||||
路径映射 →
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else-if="!isGenerating" class="empty-state glass-card">
|
||||
<text class="empty-icon">🎬</text>
|
||||
<text class="empty-text">尚未生成剧本，定义你的未来篇章</text>
|
||||
</view>
|
||||
|
||||
<view v-if="isGenerating" class="generating-state glass-card">
|
||||
<view class="spinner"></view>
|
||||
<text class="generating-text">正在采集星海中的深紫色碎屑...</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted } from 'vue'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
|
||||
const store = useAppStore()
|
||||
|
||||
const zodiacOptions = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
|
||||
const mbtiOptions = ['INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP']
|
||||
const npcRoleOptions = ['伙伴', '宿敌', '导师', '挚爱', '下属', '路人']
|
||||
const npcRelationOptions = ['信任', '对立', '暧昧', '敬畏', '背叛', '守护']
|
||||
const scriptStyles = ['爽文', '治愈', '热血', '玄幻', '职场', '赛博']
|
||||
const scriptLengths = ['短篇', '中篇', '长篇', '史诗']
|
||||
|
||||
const registrationData = computed(() => store.registrationData || {})
|
||||
const scripts = computed(() => store.scripts || [])
|
||||
|
||||
const nickname = computed({
|
||||
get: () => registrationData.value.nickname || '',
|
||||
set: (val) => store.updateRegistration({ nickname: val })
|
||||
})
|
||||
|
||||
const profession = computed({
|
||||
get: () => registrationData.value.profession || '',
|
||||
set: (val) => store.updateRegistration({ profession: val })
|
||||
})
|
||||
|
||||
const zodiacIndex = computed(() => zodiacOptions.indexOf(registrationData.value.zodiac))
|
||||
const mbtiIndex = computed(() => mbtiOptions.indexOf(registrationData.value.mbti))
|
||||
|
||||
const scriptConfig = reactive({
|
||||
theme: '',
|
||||
style: '爽文',
|
||||
length: '中篇'
|
||||
})
|
||||
|
||||
const npcConfig = reactive({
|
||||
name: '',
|
||||
role: '伙伴',
|
||||
relation: '信任',
|
||||
desc: ''
|
||||
})
|
||||
|
||||
const customNpcs = ref([])
|
||||
const isGenerating = ref(false)
|
||||
|
||||
const npcRoleIndex = computed(() => npcRoleOptions.indexOf(npcConfig.role))
|
||||
const npcRelationIndex = computed(() => npcRelationOptions.indexOf(npcConfig.relation))
|
||||
|
||||
const onZodiacChange = (e) => {
|
||||
store.updateRegistration({ zodiac: zodiacOptions[e.detail.value] })
|
||||
}
|
||||
|
||||
const onMbtiChange = (e) => {
|
||||
store.updateRegistration({ mbti: mbtiOptions[e.detail.value] })
|
||||
}
|
||||
|
||||
const onNpcRoleChange = (e) => {
|
||||
npcConfig.role = npcRoleOptions[e.detail.value]
|
||||
}
|
||||
|
||||
const onNpcRelationChange = (e) => {
|
||||
npcConfig.relation = npcRelationOptions[e.detail.value]
|
||||
}
|
||||
|
||||
const addNpc = () => {
|
||||
if (npcConfig.name) {
|
||||
customNpcs.value.push({ ...npcConfig })
|
||||
npcConfig.name = ''
|
||||
npcConfig.desc = ''
|
||||
}
|
||||
}
|
||||
|
||||
const removeNpc = (index) => {
|
||||
customNpcs.value.splice(index, 1)
|
||||
}
|
||||
|
||||
const generateScript = async () => {
|
||||
if (!scriptConfig.theme || isGenerating.value) return
|
||||
|
||||
isGenerating.value = true
|
||||
|
||||
try {
|
||||
await store.createScript({
|
||||
theme: scriptConfig.theme,
|
||||
style: scriptConfig.style,
|
||||
length: scriptConfig.length,
|
||||
character: registrationData.value,
|
||||
events: store.events
|
||||
})
|
||||
scriptConfig.theme = ''
|
||||
} finally {
|
||||
isGenerating.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const selectScript = async (id) => {
|
||||
await store.selectScript(id)
|
||||
uni.$emit('switchTab', 'path')
|
||||
}
|
||||
|
||||
const getScriptSummary = (script) => {
|
||||
const text = script.summary || script.content || ''
|
||||
return text.replace(/\s+/g, ' ').trim()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await store.fetchUserProfile()
|
||||
await store.fetchEvents()
|
||||
await store.fetchScripts()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.script-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 22rpx;
|
||||
color: rgba(192, 132, 252, 0.6);
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.section-hint {
|
||||
font-size: 16rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.profile-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.glass-input, .glass-picker {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
padding: 0 24rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
line-height: 80rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.npc-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
font-size: 20rpx;
|
||||
color: #C084FC;
|
||||
border: 1px solid rgba(192, 132, 252, 0.3);
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.npc-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 12rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.npc-input, .npc-picker {
|
||||
height: 72rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.npc-picker .picker-value {
|
||||
line-height: 72rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.glass-textarea {
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.npc-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.npc-tag {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
border: 1px solid rgba(168, 85, 247, 0.3);
|
||||
border-radius: 24rpx;
|
||||
padding: 8rpx 20rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgba(243, 232, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 28rpx;
|
||||
padding: 0 4rpx;
|
||||
}
|
||||
|
||||
.params-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.param-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.param-label {
|
||||
font-size: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.param-options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.param-option {
|
||||
padding: 10rpx 20rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.param-option.active {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
border-color: rgba(168, 85, 247, 0.5);
|
||||
color: #C084FC;
|
||||
}
|
||||
|
||||
.generate-btn {
|
||||
width: 100%;
|
||||
height: 96rpx;
|
||||
box-shadow: 0 8rpx 40rpx rgba(168, 85, 247, 0.3);
|
||||
}
|
||||
|
||||
.scripts-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.script-card {
|
||||
padding: 32rpx;
|
||||
border-left: 4rpx solid transparent;
|
||||
}
|
||||
|
||||
.script-card.selected {
|
||||
border-left-color: #C084FC;
|
||||
}
|
||||
|
||||
.script-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.script-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.script-persona {
|
||||
font-size: 18rpx;
|
||||
color: rgba(168, 85, 247, 0.6);
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
padding: 6rpx 16rpx;
|
||||
border-radius: 12rpx;
|
||||
border: 1px solid rgba(168, 85, 247, 0.2);
|
||||
}
|
||||
|
||||
.script-summary {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.script-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.script-style {
|
||||
font-size: 20rpx;
|
||||
color: #C084FC;
|
||||
}
|
||||
|
||||
.select-btn {
|
||||
font-size: 24rpx;
|
||||
color: #C084FC;
|
||||
font-weight: 600;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 80rpx 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.generating-state {
|
||||
padding: 80rpx 48rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 32rpx;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border: 4rpx solid #A855F7;
|
||||
border-top-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.generating-text {
|
||||
font-size: 26rpx;
|
||||
color: rgba(192, 132, 252, 0.6);
|
||||
font-style: italic;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,273 @@
|
||||
<template>
|
||||
<view class="main-page">
|
||||
<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-subtitle">LIFE HARMONY v3.1</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="header-right" @click="goToProfile">
|
||||
<view class="avatar-box">
|
||||
<image class="avatar" :src="userAvatar" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="page-content" scroll-y>
|
||||
<view v-if="activeTab === 'record'" class="tab-page">
|
||||
<RecordView></RecordView>
|
||||
</view>
|
||||
|
||||
<view v-if="activeTab === 'script'" class="tab-page">
|
||||
<ScriptView></ScriptView>
|
||||
</view>
|
||||
|
||||
<view v-if="activeTab === 'path'" class="tab-page">
|
||||
<PathView></PathView>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="bottom-nav" :style="{ paddingBottom: safeAreaBottom + 'px' }">
|
||||
<view
|
||||
class="nav-item"
|
||||
:class="{ active: activeTab === 'record' }"
|
||||
@click="switchTab('record')"
|
||||
>
|
||||
<text class="nav-icon">📖</text>
|
||||
<text class="nav-label">回溯过去</text>
|
||||
</view>
|
||||
<view
|
||||
class="nav-item"
|
||||
:class="{ active: activeTab === 'script' }"
|
||||
@click="switchTab('script')"
|
||||
>
|
||||
<text class="nav-icon">✨</text>
|
||||
<text class="nav-label">创造未来</text>
|
||||
</view>
|
||||
<view
|
||||
class="nav-item"
|
||||
:class="{ active: activeTab === 'path' }"
|
||||
@click="switchTab('path')"
|
||||
>
|
||||
<text class="nav-icon">🗺️</text>
|
||||
<text class="nav-label">路径实现</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
import RecordView from './RecordView.vue'
|
||||
import ScriptView from './ScriptView.vue'
|
||||
import PathView from './PathView.vue'
|
||||
|
||||
const store = useAppStore()
|
||||
const activeTab = ref('record')
|
||||
|
||||
const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
|
||||
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
|
||||
|
||||
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)
|
||||
})
|
||||
|
||||
const userAvatar = computed(() => {
|
||||
const nickname = store.userProfile?.nickname || 'user'
|
||||
return `https://api.dicebear.com/7.x/avataaars/svg?seed=${nickname}&backgroundColor=A855F7`
|
||||
})
|
||||
|
||||
const switchTab = (tab) => {
|
||||
activeTab.value = tab
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
uni.$off('switchTab', switchTab)
|
||||
})
|
||||
|
||||
const goToProfile = () => {
|
||||
uni.navigateTo({ url: '/pages/profile/index' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aurora-top {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 60%;
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
filter: blur(120rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.aurora-bottom {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
filter: blur(100rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 24rpx 32rpx;
|
||||
padding-top: calc(24rpx + constant(safe-area-inset-top));
|
||||
padding-top: calc(24rpx + env(safe-area-inset-top));
|
||||
background: rgba(15, 7, 26, 0.6);
|
||||
backdrop-filter: blur(20rpx);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(135deg, #9333EA 0%, #7C3AED 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
|
||||
.brand-title {
|
||||
display: block;
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
letter-spacing: 6rpx;
|
||||
}
|
||||
|
||||
.brand-subtitle {
|
||||
display: block;
|
||||
font-size: 16rpx;
|
||||
color: rgba(168, 85, 247, 0.6);
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.tab-page {
|
||||
padding: 32rpx;
|
||||
padding-bottom: calc(180rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 140rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
background: rgba(15, 7, 26, 0.95);
|
||||
backdrop-filter: blur(40rpx);
|
||||
-webkit-backdrop-filter: blur(40rpx);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6rpx;
|
||||
padding: 16rpx 32rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
min-width: 160rpx;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: #C084FC;
|
||||
transform: translateY(-8rpx);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 18rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.safe-area-bottom {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<view class="onboarding-page">
|
||||
<view class="bg-decoration">
|
||||
<view class="aurora-top"></view>
|
||||
<view class="aurora-bottom"></view>
|
||||
</view>
|
||||
|
||||
<view class="content" :style="{ paddingTop: safeAreaTop + 20 + 'px', paddingBottom: safeAreaBottom + 20 + 'px' }">
|
||||
<scroll-view class="step-content" scroll-y>
|
||||
<view class="step-inner">
|
||||
<view v-if="currentStep === 1" class="step animate-fade-in">
|
||||
<view class="step-header">
|
||||
<text class="step-title font-serif">系统初始化</text>
|
||||
<text class="step-subtitle">定义你在人生OS中的唯一代码</text>
|
||||
</view>
|
||||
|
||||
<view class="form-grid">
|
||||
<view class="input-group">
|
||||
<text class="label">你的昵称</text>
|
||||
<input
|
||||
class="glass-input"
|
||||
placeholder="输入昵称"
|
||||
v-model="formData.nickname"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="label">性别</text>
|
||||
<picker class="glass-picker" mode="selector" :range="genderOptions" :value="genderIndex" @change="onGenderChange">
|
||||
<view class="picker-value">{{ formData.gender || '请选择' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="label">星座</text>
|
||||
<picker class="glass-picker" mode="selector" :range="zodiacOptions" :value="zodiacIndex" @change="onZodiacChange">
|
||||
<view class="picker-value">{{ formData.zodiac || '请选择' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="label">MBTI人格</text>
|
||||
<picker class="glass-picker" mode="selector" :range="mbtiOptions" :value="mbtiIndex" @change="onMbtiChange">
|
||||
<view class="picker-value">{{ formData.mbti || '请选择' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="input-group full-width">
|
||||
<text class="label">兴趣爱好</text>
|
||||
<input
|
||||
class="glass-input"
|
||||
placeholder="用逗号分隔，如：阅读，旅行，摄影"
|
||||
v-model="hobbiesText"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="currentStep === 2" class="step animate-fade-in">
|
||||
<view class="step-header">
|
||||
<text class="step-title font-serif">回溯起源</text>
|
||||
<text class="step-subtitle">一段让你感到温暖的早期时光</text>
|
||||
</view>
|
||||
|
||||
<view class="memory-form">
|
||||
<view class="input-group">
|
||||
<text class="label">日期</text>
|
||||
<picker class="glass-picker" mode="date" :value="formData.childhood.date" @change="onChildhoodDateChange">
|
||||
<view class="picker-value">{{ formData.childhood.date || '请选择日期' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="label">回忆一段具体且温暖的午后...</text>
|
||||
<textarea
|
||||
class="glass-textarea"
|
||||
rows="4"
|
||||
placeholder="描述那段时光..."
|
||||
v-model="formData.childhood.text"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="hint-section">
|
||||
<view class="hint-title">
|
||||
<text class="icon">✨</text>
|
||||
<text>灵感气泡</text>
|
||||
</view>
|
||||
<view class="hint-tags">
|
||||
<text
|
||||
v-for="(hint, index) in childhoodHints"
|
||||
:key="index"
|
||||
class="hint-tag"
|
||||
@click="addChildhoodHint(hint)"
|
||||
>
|
||||
{{ hint }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="currentStep === 3" class="step animate-fade-in">
|
||||
<view class="step-header">
|
||||
<text class="step-title font-serif">悦然时刻</text>
|
||||
<text class="step-subtitle">一段感受到生命跃动的经历</text>
|
||||
</view>
|
||||
|
||||
<view class="memory-form">
|
||||
<view class="input-group">
|
||||
<text class="label">日期</text>
|
||||
<picker class="glass-picker" mode="date" :value="formData.joy.date" @change="onJoyDateChange">
|
||||
<view class="picker-value">{{ formData.joy.date || '请选择日期' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="label">想一个令你会心一笑的瞬间...</text>
|
||||
<textarea
|
||||
class="glass-textarea"
|
||||
rows="4"
|
||||
placeholder="描述那个瞬间..."
|
||||
v-model="formData.joy.text"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="hint-section">
|
||||
<view class="hint-title">
|
||||
<text class="icon">✨</text>
|
||||
<text>灵感气泡</text>
|
||||
</view>
|
||||
<view class="hint-tags">
|
||||
<text
|
||||
v-for="(hint, index) in joyHints"
|
||||
:key="index"
|
||||
class="hint-tag"
|
||||
@click="addJoyHint(hint)"
|
||||
>
|
||||
{{ hint }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="currentStep === 4" class="step animate-fade-in">
|
||||
<view class="step-header">
|
||||
<text class="step-title font-serif">破茧成蝶</text>
|
||||
<text class="step-subtitle">在宁静中默默积蓄力量的日子</text>
|
||||
</view>
|
||||
|
||||
<view class="memory-form">
|
||||
<view class="input-group">
|
||||
<text class="label">日期</text>
|
||||
<picker class="glass-picker" mode="date" :value="formData.low.date" @change="onLowDateChange">
|
||||
<view class="picker-value">{{ formData.low.date || '请选择日期' }}</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="label">描述那段有些艰难但让你成长的日子...</text>
|
||||
<textarea
|
||||
class="glass-textarea"
|
||||
rows="4"
|
||||
placeholder="描述那段经历..."
|
||||
v-model="formData.low.text"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="hint-section">
|
||||
<view class="hint-title">
|
||||
<text class="icon">✨</text>
|
||||
<text>灵感气泡</text>
|
||||
</view>
|
||||
<view class="hint-tags">
|
||||
<text
|
||||
v-for="(hint, index) in lowHints"
|
||||
:key="index"
|
||||
class="hint-tag"
|
||||
@click="addLowHint(hint)"
|
||||
>
|
||||
{{ hint }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="currentStep === 5" class="step animate-fade-in">
|
||||
<view class="step-header">
|
||||
<text class="step-title font-serif">未来憧憬</text>
|
||||
<text class="step-subtitle">对未来理想生活状态的预见</text>
|
||||
</view>
|
||||
|
||||
<view class="memory-form">
|
||||
<view class="input-group">
|
||||
<text class="label">你想成为怎样的人？</text>
|
||||
<textarea
|
||||
class="glass-textarea"
|
||||
rows="3"
|
||||
placeholder="描述你对未来的愿景..."
|
||||
v-model="formData.future.vision"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="input-group">
|
||||
<text class="label">你的理想生活状态</text>
|
||||
<textarea
|
||||
class="glass-textarea"
|
||||
rows="3"
|
||||
placeholder="描述理想的一天..."
|
||||
v-model="formData.future.ideal"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="quote-box">
|
||||
<text class="quote-icon">✨</text>
|
||||
<text class="quote-text">"照见未来，便是创造的开始。"</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="bottom-bar">
|
||||
<view class="step-dots">
|
||||
<view
|
||||
v-for="step in 5"
|
||||
:key="step"
|
||||
class="step-dot"
|
||||
:class="{ active: currentStep === step }"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="actions">
|
||||
<button
|
||||
v-if="currentStep > 1"
|
||||
class="btn-secondary"
|
||||
@click="prevStep"
|
||||
>
|
||||
返回
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn-primary next-btn"
|
||||
:loading="isSaving"
|
||||
@click="nextStep"
|
||||
>
|
||||
<text v-if="currentStep === 5">{{ isSaving ? '保存中...' : '开启人生' }}</text>
|
||||
<text v-else>继续</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, reactive, onMounted, watch } from 'vue'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
import * as lifeEventService from '../../services/lifeEvent.js'
|
||||
|
||||
const store = useAppStore()
|
||||
|
||||
const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
|
||||
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
|
||||
|
||||
onMounted(async () => {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
|
||||
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
|
||||
await store.fetchUserProfile()
|
||||
Object.assign(formData, store.registrationData)
|
||||
currentStep.value = store.currentStep || 1
|
||||
})
|
||||
|
||||
const currentStep = ref(store.currentStep || 1)
|
||||
const isSaving = ref(false)
|
||||
|
||||
const formData = reactive({
|
||||
nickname: '',
|
||||
gender: '',
|
||||
mbti: '',
|
||||
zodiac: '',
|
||||
profession: '',
|
||||
hobbies: [],
|
||||
childhood: { date: '', text: '' },
|
||||
joy: { date: '', text: '' },
|
||||
low: { date: '', text: '' },
|
||||
future: { vision: '', ideal: '' }
|
||||
})
|
||||
|
||||
const genderOptions = ['男', '女']
|
||||
const zodiacOptions = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
|
||||
const mbtiOptions = ['INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP']
|
||||
|
||||
const childhoodHints = ['秘密花园', '老旧弄堂', '秋千', '夏蝉', '被保护的', '好奇心']
|
||||
const joyHints = ['突破', '共鸣', '清晨阳光', '认可', '旅行终点', '深呼吸']
|
||||
const lowHints = ['迷茫', '无力感', '雨后街道', '重新出发', '裂痕中的光', '蜕变']
|
||||
|
||||
const hobbiesText = computed({
|
||||
get: () => formData.hobbies.join('，'),
|
||||
set: (val) => {
|
||||
formData.hobbies = val.split(/[,，]/).map(s => s.trim()).filter(s => s)
|
||||
}
|
||||
})
|
||||
|
||||
const genderIndex = computed(() => genderOptions.indexOf(formData.gender))
|
||||
const zodiacIndex = computed(() => zodiacOptions.indexOf(formData.zodiac))
|
||||
const mbtiIndex = computed(() => mbtiOptions.indexOf(formData.mbti))
|
||||
|
||||
const onGenderChange = (e) => {
|
||||
formData.gender = genderOptions[e.detail.value]
|
||||
}
|
||||
|
||||
const onZodiacChange = (e) => {
|
||||
formData.zodiac = zodiacOptions[e.detail.value]
|
||||
}
|
||||
|
||||
const onMbtiChange = (e) => {
|
||||
formData.mbti = mbtiOptions[e.detail.value]
|
||||
}
|
||||
|
||||
const onChildhoodDateChange = (e) => {
|
||||
formData.childhood.date = e.detail.value
|
||||
}
|
||||
|
||||
const onJoyDateChange = (e) => {
|
||||
formData.joy.date = e.detail.value
|
||||
}
|
||||
|
||||
const onLowDateChange = (e) => {
|
||||
formData.low.date = e.detail.value
|
||||
}
|
||||
|
||||
const addChildhoodHint = (hint) => {
|
||||
formData.childhood.text += hint + ' '
|
||||
}
|
||||
|
||||
const addJoyHint = (hint) => {
|
||||
formData.joy.text += hint + ' '
|
||||
}
|
||||
|
||||
const addLowHint = (hint) => {
|
||||
formData.low.text += hint + ' '
|
||||
}
|
||||
|
||||
const prevStep = () => {
|
||||
if (currentStep.value > 1) {
|
||||
saveStepData()
|
||||
currentStep.value--
|
||||
}
|
||||
}
|
||||
|
||||
const nextStep = async () => {
|
||||
saveStepData()
|
||||
|
||||
if (currentStep.value < 5) {
|
||||
currentStep.value++
|
||||
} else {
|
||||
isSaving.value = true
|
||||
try {
|
||||
const result = await store.saveUserProfile()
|
||||
if (result.success) {
|
||||
const eventsToSave = [
|
||||
{ data: formData.childhood, type: 'childhood', title: '童年记忆' },
|
||||
{ data: formData.joy, type: 'joy', title: '光芒闪耀的时刻' },
|
||||
{ data: formData.low, type: 'low', title: '在暗夜中潜行' }
|
||||
]
|
||||
await Promise.all(
|
||||
eventsToSave.map(({ data, type, title }) => {
|
||||
if (!data?.date || !data?.text) return Promise.resolve()
|
||||
return lifeEventService.createEvent({
|
||||
title,
|
||||
time: data.date,
|
||||
content: data.text,
|
||||
eventType: 'milestone',
|
||||
tags: [type]
|
||||
})
|
||||
})
|
||||
)
|
||||
await store.fetchEvents()
|
||||
uni.showToast({ title: '欢迎开启人生OS', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({ url: '/pages/main/index' })
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({ title: result.error || '保存失败', icon: 'none' })
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({ title: '保存失败', icon: 'none' })
|
||||
} finally {
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const saveStepData = () => {
|
||||
store.updateRegistration({ ...formData })
|
||||
}
|
||||
|
||||
watch(currentStep, (val) => {
|
||||
store.setCurrentStep(val)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.onboarding-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aurora-top {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 60%;
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
filter: blur(120rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.aurora-bottom {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
filter: blur(100rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 40rpx;
|
||||
padding-top: calc(40rpx + constant(safe-area-inset-top));
|
||||
padding-top: calc(40rpx + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.step-inner {
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.step {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20rpx); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.step-header {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
display: block;
|
||||
font-size: 46rpx;
|
||||
font-weight: 400;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 12rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.step-subtitle {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: rgba(192, 132, 252, 0.6);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
margin-bottom: 12rpx;
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.glass-input, .glass-picker {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
color: #F3E8FF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.glass-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.picker-value {
|
||||
line-height: 88rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.glass-textarea {
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20rpx;
|
||||
padding: 24rpx;
|
||||
color: #F3E8FF;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.glass-textarea::placeholder {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.memory-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.hint-section {
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
border: 1px solid rgba(168, 85, 247, 0.15);
|
||||
border-radius: 32rpx;
|
||||
padding: 32rpx;
|
||||
margin-top: 16rpx;
|
||||
box-shadow: inset 0 0 30rpx rgba(168, 85, 247, 0.08);
|
||||
}
|
||||
|
||||
.hint-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8rpx;
|
||||
font-size: 18rpx;
|
||||
color: rgba(192, 132, 252, 0.6);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 4rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.hint-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.hint-tag {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 32rpx;
|
||||
padding: 10rpx 22rpx;
|
||||
font-size: 22rpx;
|
||||
color: rgba(243, 232, 255, 0.8);
|
||||
}
|
||||
|
||||
.hint-tag:active {
|
||||
background: rgba(168, 85, 247, 0.2);
|
||||
border-color: rgba(168, 85, 247, 0.4);
|
||||
}
|
||||
|
||||
.quote-box {
|
||||
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: 20rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
|
||||
.quote-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.quote-text {
|
||||
font-size: 26rpx;
|
||||
color: rgba(243, 232, 255, 0.7);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
padding-top: 32rpx;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.step-dots {
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.step-dot {
|
||||
flex: 1;
|
||||
height: 8rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4rpx;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.step-dot.active {
|
||||
flex: 1;
|
||||
height: 8rpx;
|
||||
background: #A855F7;
|
||||
box-shadow: 0 0 24rpx rgba(168, 85, 247, 0.6);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 24rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.next-btn {
|
||||
min-width: 200rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<view class="profile-page">
|
||||
<view class="bg-decoration">
|
||||
<view class="aurora-top"></view>
|
||||
<view class="aurora-bottom"></view>
|
||||
</view>
|
||||
|
||||
<scroll-view class="content" scroll-y :style="{ paddingTop: safeAreaTop + 20 + 'px', paddingBottom: safeAreaBottom + 20 + 'px' }">
|
||||
<view class="user-card">
|
||||
<view class="avatar-box">
|
||||
<image class="avatar" :src="userAvatar" mode="aspectFill" />
|
||||
<view class="verified-badge">✓</view>
|
||||
</view>
|
||||
|
||||
<view class="user-info">
|
||||
<text class="nickname font-serif">{{ userProfile.nickname || '未同步系统' }}</text>
|
||||
<text class="user-tags">{{ userTags }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="stats-row">
|
||||
<view class="stat-card glass-card">
|
||||
<text class="stat-label">觉醒深度</text>
|
||||
<text class="stat-value">Lv.4</text>
|
||||
</view>
|
||||
<view class="stat-card glass-card">
|
||||
<text class="stat-label">星历契合</text>
|
||||
<text class="stat-value">98%</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="menu-item glass-card" @click="editProfile">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">👤</text>
|
||||
<text class="menu-title">个人档案设置</text>
|
||||
</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item glass-card">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">🔄</text>
|
||||
<text class="menu-title">多账号切换</text>
|
||||
</view>
|
||||
<text class="menu-arrow">›</text>
|
||||
</view>
|
||||
|
||||
<view class="menu-item glass-card">
|
||||
<view class="menu-left">
|
||||
<text class="menu-icon">📧</text>
|
||||
<text class="menu-title">与开发者对话</text>
|
||||
</view>
|
||||
<text class="menu-arrow">↗</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<button class="logout-btn" @click="handleLogout">
|
||||
TERMINATE LIFE HARMONY
|
||||
</button>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
|
||||
const store = useAppStore()
|
||||
|
||||
const safeAreaTop = ref(uni.getStorageSync('safeAreaTop') || 20)
|
||||
const safeAreaBottom = ref(uni.getStorageSync('safeAreaBottom') || 0)
|
||||
|
||||
onMounted(() => {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
safeAreaTop.value = systemInfo.safeAreaInsets?.top || systemInfo.statusBarHeight || 20
|
||||
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
|
||||
})
|
||||
|
||||
const userProfile = computed(() => store.userProfile || {})
|
||||
|
||||
const userAvatar = computed(() => {
|
||||
const nickname = userProfile.value.nickname || 'user'
|
||||
return `https://api.dicebear.com/7.x/avataaars/svg?seed=${nickname}&backgroundColor=A855F7`
|
||||
})
|
||||
|
||||
const userTags = computed(() => {
|
||||
const { mbti, zodiac, profession } = userProfile.value
|
||||
const tags = [mbti || 'QUESTER', zodiac || 'STAR', profession || '星民']
|
||||
return tags.join(' · ')
|
||||
})
|
||||
|
||||
const editProfile = () => {
|
||||
uni.navigateTo({ url: '/pages/onboarding/index?edit=1' })
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
uni.showModal({
|
||||
title: '确认退出',
|
||||
content: '确定要退出登录吗？',
|
||||
success: async (res) => {
|
||||
if (res.confirm) {
|
||||
await store.logout()
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aurora-top {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 60%;
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
filter: blur(120rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.aurora-bottom {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
filter: blur(100rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 40rpx;
|
||||
padding-top: calc(60rpx + constant(safe-area-inset-top));
|
||||
padding-top: calc(60rpx + env(safe-area-inset-top));
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.user-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 48rpx 0;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
position: relative;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid rgba(168, 85, 247, 0.3);
|
||||
padding: 8rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
}
|
||||
|
||||
.verified-badge {
|
||||
position: absolute;
|
||||
bottom: 8rpx;
|
||||
right: 8rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #9333EA;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 20rpx;
|
||||
color: white;
|
||||
border: 4rpx solid #0F071A;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nickname {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
margin-bottom: 16rpx;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.user-tags {
|
||||
display: block;
|
||||
font-size: 18rpx;
|
||||
color: rgba(168, 85, 247, 0.6);
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24rpx;
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 18rpx;
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
letter-spacing: 4rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 36rpx;
|
||||
font-weight: 300;
|
||||
color: rgba(243, 232, 255, 0.9);
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
margin-bottom: 64rpx;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.menu-title {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.menu-arrow {
|
||||
font-size: 32rpx;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24rpx;
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
font-size: 20rpx;
|
||||
letter-spacing: 6rpx;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
color: rgba(168, 85, 247, 0.5);
|
||||
border-color: rgba(168, 85, 247, 0.2);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="bg-decoration">
|
||||
<view class="aurora-top"></view>
|
||||
<view class="aurora-bottom"></view>
|
||||
</view>
|
||||
<view class="overlay">
|
||||
<view class="status-bar-space" :style="{ height: statusBarHeight + 'px' }"></view>
|
||||
<view class="content-area" :style="{ paddingBottom: safeAreaBottom + 'px' }">
|
||||
<image class="logo" src="/static/logo.svg" mode="widthFix"></image>
|
||||
<text class="app-name font-serif">人生OS</text>
|
||||
<text class="app-version">LIFE HARMONY v3.1</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useAppStore } from '../../stores/app.js'
|
||||
|
||||
const statusBarHeight = ref(20)
|
||||
const safeAreaBottom = ref(0)
|
||||
|
||||
onLoad(() => {
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = systemInfo.statusBarHeight || 20
|
||||
safeAreaBottom.value = systemInfo.safeAreaInsets?.bottom || 0
|
||||
setTimeout(async () => {
|
||||
const store = useAppStore()
|
||||
const token = uni.getStorageSync('access_token')
|
||||
if (token) {
|
||||
await store.fetchUserProfile()
|
||||
if (store.hasProfile) {
|
||||
uni.reLaunch({ url: '/pages/main/index' })
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/onboarding/index' })
|
||||
}
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/login/index' })
|
||||
}
|
||||
}, 2000)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 750rpx;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
background: linear-gradient(180deg, #0F071A 0%, #1A0B2E 50%, #0F071A 100%);
|
||||
}
|
||||
|
||||
.status-bar-space {
|
||||
height: constant(safe-area-inset-top);
|
||||
height: env(safe-area-inset-top);
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bg-decoration {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.aurora-top {
|
||||
position: absolute;
|
||||
top: -10%;
|
||||
left: -10%;
|
||||
width: 120%;
|
||||
height: 60%;
|
||||
background: rgba(168, 85, 247, 0.08);
|
||||
filter: blur(120rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.aurora-bottom {
|
||||
position: absolute;
|
||||
bottom: -10%;
|
||||
right: -10%;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: rgba(139, 92, 246, 0.05);
|
||||
filter: blur(100rpx);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 180rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 52rpx;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 0.95);
|
||||
letter-spacing: 8rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.app-version {
|
||||
font-size: 24rpx;
|
||||
color: rgba(168, 85, 247, 0.7);
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user