feat(S4): new user onboarding wizard with 3-step guided flow
- Backend: check-login API returns is_new_user flag (no prompt history) - Vue: OnboardingWizard component (scene select → tips → ready) - Vue: HomeView conditionally shows wizard for new users - Auth store: expose isNewUser state, auto-detect on refresh Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,48 +1,62 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import OnboardingWizard from '@/components/onboarding/OnboardingWizard.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const showOnboarding = ref(false)
|
||||
const flaskOrigin = import.meta.env.VITE_FLASK_ORIGIN || ''
|
||||
const generateUrl = flaskOrigin ? `${flaskOrigin}/` : '/'
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.ready) await auth.refresh()
|
||||
showOnboarding.value = (auth as any).isNewUser ?? false
|
||||
})
|
||||
|
||||
function openLegacyGenerate() {
|
||||
window.location.href = generateUrl
|
||||
}
|
||||
|
||||
function onOnboardingDone() {
|
||||
showOnboarding.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="home">
|
||||
<el-card shadow="never" class="hero">
|
||||
<h1>Vue 3 前端试验田</h1>
|
||||
<p class="lead">
|
||||
与现有 Flask 后端并行开发:开发时 Vite 将 <code>/api</code>、<code>/poetry</code>、<code>/static</code> 代理到后端;会话使用 Cookie(
|
||||
<code>withCredentials</code>
|
||||
)。建议开发使用 <strong>127.0.0.1:3000</strong>。经典版生成页也可从顶部 <strong>更多</strong> 菜单进入。
|
||||
</p>
|
||||
<el-space wrap>
|
||||
<el-button type="primary" @click="$router.push({ name: 'generate' })">Vue 提示词生成</el-button>
|
||||
<el-button @click="$router.push({ name: 'optimization' })">提示词优化</el-button>
|
||||
<el-button @click="$router.push({ name: 'resume-optimization' })">简历 / 求职信</el-button>
|
||||
<el-button @click="openLegacyGenerate">经典生成页(Flask)</el-button>
|
||||
<el-button @click="$router.push({ name: 'favorites' })">收藏列表</el-button>
|
||||
<el-button @click="$router.push({ name: 'history' })">优化历史</el-button>
|
||||
<el-button @click="$router.push({ name: 'meal-planning' })">饭菜规划</el-button>
|
||||
<el-button @click="$router.push({ name: 'poetry' })">古诗词</el-button>
|
||||
<el-button @click="$router.push({ name: 'android-tools' })">Android 工具</el-button>
|
||||
<el-button @click="$router.push({ name: 'profile' })">个人资料</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
<!-- 新用户引导 -->
|
||||
<OnboardingWizard v-if="showOnboarding" @done="onOnboardingDone" />
|
||||
|
||||
<el-card shadow="never" class="status">
|
||||
<template #header>会话状态</template>
|
||||
<p v-if="!auth.ready">正在检测登录状态…</p>
|
||||
<template v-else>
|
||||
<p v-if="auth.loggedIn">
|
||||
已登录:<strong>{{ auth.nickname || auth.userId }}</strong>
|
||||
<div v-else>
|
||||
<el-card shadow="never" class="hero">
|
||||
<h1>提示词大师</h1>
|
||||
<p class="lead">
|
||||
智能 AI 提示词生成平台:将简单想法变为专业 Prompt,覆盖饭菜规划、古诗词解析、简历优化等 15 种场景。
|
||||
</p>
|
||||
<p v-else>未登录(收藏接口仍可能按访客策略返回数据,取决于后端)。</p>
|
||||
</template>
|
||||
</el-card>
|
||||
<el-space wrap>
|
||||
<el-button type="primary" @click="$router.push({ name: 'generate' })">提示词生成</el-button>
|
||||
<el-button @click="$router.push({ name: 'optimization' })">提示词优化</el-button>
|
||||
<el-button @click="$router.push({ name: 'resume-optimization' })">简历优化</el-button>
|
||||
<el-button @click="$router.push({ name: 'meal-planning' })">饭菜规划</el-button>
|
||||
<el-button @click="$router.push({ name: 'poetry' })">古诗词</el-button>
|
||||
<el-button @click="$router.push({ name: 'android-tools' })">Android 工具</el-button>
|
||||
<el-button @click="$router.push({ name: 'favorites' })">收藏</el-button>
|
||||
<el-button @click="$router.push({ name: 'history' })">历史</el-button>
|
||||
<el-button @click="$router.push({ name: 'profile' })">个人资料</el-button>
|
||||
</el-space>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="never" class="status">
|
||||
<template #header>会话状态</template>
|
||||
<p v-if="!auth.ready">正在检测登录状态…</p>
|
||||
<template v-else>
|
||||
<p v-if="auth.loggedIn">
|
||||
已登录:<strong>{{ auth.nickname || auth.userId }}</strong>
|
||||
</p>
|
||||
<p v-else>未登录 — 仍可使用核心功能,登录后可收藏和查看历史。</p>
|
||||
</template>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -71,13 +85,6 @@ function openLegacyGenerate() {
|
||||
line-height: 1.65;
|
||||
color: $text-secondary;
|
||||
font-size: 0.95rem;
|
||||
|
||||
code {
|
||||
font-size: 0.85em;
|
||||
padding: 0.1em 0.35em;
|
||||
background: $gray-100;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
|
||||
Reference in New Issue
Block a user