239 lines
9.0 KiB
Vue
239 lines
9.0 KiB
Vue
<script setup lang="ts">
|
||
import { getToken, refreshMe, useAuthState } from '@/composables/useAuth'
|
||
import type { HttpError } from '@/lib/http'
|
||
import { http } from '@/lib/http'
|
||
import { computed, ref, watch } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
|
||
const router = useRouter()
|
||
const auth = useAuthState()
|
||
|
||
const step = ref(1)
|
||
const name = ref('')
|
||
const moduleKey = ref<'shop' | 'hr'>('shop')
|
||
const experienceLevel = ref<'beginner' | 'normal' | 'advanced'>('beginner')
|
||
const dbMode = ref<'mock' | 'import'>('mock')
|
||
const mockDbKey = ref<'shop' | 'hr'>('shop')
|
||
|
||
const loading = ref(false)
|
||
const error = ref<string | null>(null)
|
||
|
||
const canNext = computed(() => {
|
||
if (step.value === 1) return name.value.trim().length >= 1
|
||
return true
|
||
})
|
||
|
||
watch(
|
||
() => moduleKey.value,
|
||
(v) => {
|
||
if (dbMode.value === 'mock') mockDbKey.value = v
|
||
},
|
||
{ immediate: true },
|
||
)
|
||
|
||
watch(
|
||
() => dbMode.value,
|
||
(v) => {
|
||
if (v === 'mock') mockDbKey.value = moduleKey.value
|
||
},
|
||
)
|
||
|
||
async function next() {
|
||
if (!canNext.value) return
|
||
step.value = Math.min(4, step.value + 1)
|
||
}
|
||
|
||
function prev() {
|
||
step.value = Math.max(1, step.value - 1)
|
||
}
|
||
|
||
async function complete() {
|
||
error.value = null
|
||
loading.value = true
|
||
try {
|
||
const token = getToken()
|
||
await http('/api/onboarding/complete', {
|
||
method: 'POST',
|
||
token,
|
||
body: {
|
||
name: name.value.trim(),
|
||
moduleKey: moduleKey.value,
|
||
experienceLevel: experienceLevel.value,
|
||
dbMode: dbMode.value,
|
||
mockDbKey: dbMode.value === 'mock' ? mockDbKey.value : null,
|
||
},
|
||
})
|
||
await refreshMe()
|
||
if (dbMode.value === 'import') router.replace({ name: 'databases' })
|
||
else router.replace({ name: 'home' })
|
||
} catch (e) {
|
||
const he = e as HttpError
|
||
error.value = he.message || '提交失败'
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="min-h-full">
|
||
<div class="mx-auto max-w-3xl px-4 py-10">
|
||
<div class="mb-6">
|
||
<div class="text-lg font-semibold">首次引导</div>
|
||
<div class="mt-1 text-sm text-zinc-400">用 1 分钟完成设置，就可以开始练习。</div>
|
||
</div>
|
||
|
||
<div class="rounded-2xl border border-zinc-800 bg-zinc-950 p-6">
|
||
<div class="mb-5 flex items-center justify-between">
|
||
<div class="text-sm text-zinc-400">第 {{ step }} / 4 步</div>
|
||
<div class="text-sm text-zinc-300">{{ auth.me?.email }}</div>
|
||
</div>
|
||
|
||
<div v-if="step === 1" class="space-y-3">
|
||
<div class="text-sm font-medium">先告诉我你的名字</div>
|
||
<input
|
||
v-model="name"
|
||
class="w-full rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2 text-sm outline-none focus:border-blue-600"
|
||
placeholder="例如：小明"
|
||
/>
|
||
</div>
|
||
|
||
<div v-else-if="step === 2" class="space-y-3">
|
||
<div class="text-sm font-medium">你感兴趣的模块</div>
|
||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||
<button
|
||
class="rounded-xl border px-4 py-3 text-left"
|
||
:class="moduleKey === 'shop' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="moduleKey = 'shop'"
|
||
>
|
||
<div class="text-sm font-medium">电商</div>
|
||
<div class="mt-1 text-xs text-zinc-400">商品/订单/用户</div>
|
||
</button>
|
||
<button
|
||
class="rounded-xl border px-4 py-3 text-left"
|
||
:class="moduleKey === 'hr' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="moduleKey = 'hr'"
|
||
>
|
||
<div class="text-sm font-medium">人事</div>
|
||
<div class="mt-1 text-xs text-zinc-400">员工/部门/薪资</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else-if="step === 3" class="space-y-3">
|
||
<div class="text-sm font-medium">你的经验水平</div>
|
||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-3">
|
||
<button
|
||
class="rounded-xl border px-4 py-3 text-left"
|
||
:class="experienceLevel === 'beginner' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="experienceLevel = 'beginner'"
|
||
>
|
||
<div class="text-sm font-medium">新手</div>
|
||
<div class="mt-1 text-xs text-zinc-400">从 SELECT 开始</div>
|
||
</button>
|
||
<button
|
||
class="rounded-xl border px-4 py-3 text-left"
|
||
:class="experienceLevel === 'normal' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="experienceLevel = 'normal'"
|
||
>
|
||
<div class="text-sm font-medium">一般</div>
|
||
<div class="mt-1 text-xs text-zinc-400">JOIN/聚合</div>
|
||
</button>
|
||
<button
|
||
class="rounded-xl border px-4 py-3 text-left"
|
||
:class="experienceLevel === 'advanced' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="experienceLevel = 'advanced'"
|
||
>
|
||
<div class="text-sm font-medium">进阶</div>
|
||
<div class="mt-1 text-xs text-zinc-400">窗口/CTE</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="space-y-3">
|
||
<div class="text-sm font-medium">选择数据库来源</div>
|
||
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||
<button
|
||
class="rounded-xl border px-4 py-3 text-left"
|
||
:class="dbMode === 'mock' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="dbMode = 'mock'"
|
||
>
|
||
<div class="text-sm font-medium">使用模拟数据库</div>
|
||
<div class="mt-1 text-xs text-zinc-400">开箱即用，适合练习</div>
|
||
</button>
|
||
<button
|
||
class="rounded-xl border px-4 py-3 text-left"
|
||
:class="dbMode === 'import' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="dbMode = 'import'"
|
||
>
|
||
<div class="text-sm font-medium">导入我的数据库</div>
|
||
<div class="mt-1 text-xs text-zinc-400">上传初始化 SQL</div>
|
||
</button>
|
||
</div>
|
||
|
||
<div v-if="dbMode === 'mock'" class="rounded-xl border border-zinc-800 bg-zinc-950 p-4">
|
||
<div class="text-xs text-zinc-400">选择一个模拟库</div>
|
||
<div class="mt-1 text-xs text-zinc-500">推荐：与模块一致的模拟库（更容易通过判题）</div>
|
||
<div class="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
||
<button
|
||
class="rounded-lg border px-3 py-2 text-left"
|
||
:class="mockDbKey === 'shop' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="mockDbKey = 'shop'"
|
||
>
|
||
<div class="text-sm font-medium">电商库</div>
|
||
<div class="mt-1 text-xs text-zinc-400">商品/订单</div>
|
||
</button>
|
||
<button
|
||
class="rounded-lg border px-3 py-2 text-left"
|
||
:class="mockDbKey === 'hr' ? 'border-blue-600 bg-blue-950/30' : 'border-zinc-800 hover:bg-zinc-900'"
|
||
@click="mockDbKey = 'hr'"
|
||
>
|
||
<div class="text-sm font-medium">人事库</div>
|
||
<div class="mt-1 text-xs text-zinc-400">员工/部门</div>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else class="rounded-xl border border-zinc-800 bg-zinc-950 p-4 text-sm text-zinc-300">
|
||
你可以先导入自己的库做自由练习；若要做题并获得判题结果，建议之后切换到模块对应的模拟库。
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="error" class="mt-5 rounded-lg border border-red-900 bg-red-950 px-3 py-2 text-sm text-red-200">
|
||
{{ error }}
|
||
</div>
|
||
|
||
<div class="mt-6 flex items-center justify-between">
|
||
<button
|
||
class="rounded-lg px-3 py-2 text-sm text-zinc-300 hover:bg-zinc-900 disabled:opacity-50"
|
||
:disabled="step === 1 || loading"
|
||
@click="prev"
|
||
>
|
||
上一步
|
||
</button>
|
||
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
v-if="step < 4"
|
||
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-60"
|
||
:disabled="!canNext || loading"
|
||
@click="next"
|
||
>
|
||
下一步
|
||
</button>
|
||
<button
|
||
v-else
|
||
class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-500 disabled:opacity-60"
|
||
:disabled="loading"
|
||
@click="complete"
|
||
>
|
||
{{ loading ? '提交中…' : '完成并进入系统' }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|