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:
renjianbo
2026-05-03 09:54:32 +08:00
parent 5cd7e1eb30
commit e2c0b6b87a
5 changed files with 238 additions and 39 deletions

View File

@@ -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 {