小程序初始化

2026-02-27 11:32:50 +08:00
parent 93574dbb45
commit 97e1ea2706
252 changed files with 32427 additions and 12363 deletions
@@ -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>