小程序初始化
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user