feat(desktop): 桌面端首启 4 步引导

桌面端用户安装后空白进 web 主页面,提示填模型但不知道从哪填、转写引擎从哪选、
为什么 fast-whisper 在下东西。新增首启 onboarding wizard,把四件事拉成一条线:

1. 后端连通性自检(启动后调 /api/get_all_providers,OK 才能进下一步)
2. LLM 供应商 + 模型:填 OpenAI 兼容 base_url + key + model_name,调
   /add_provider 创建并 addModel 默认 model,附带 testConnection
3. 转写引擎:四选一,**默认推荐 Groq**(在线、免下载本地模型);
   选 fast-whisper 时显式提示"将下载模型"
4. Cookie 同步说明:桌面端无 chrome.cookies API,引导手动配;并指向插件版

实现:
- 新页 src/pages/Onboarding/index.tsx,单文件 stateful wizard
- App.tsx 加 /onboarding 路由 + OnboardingGuard 路由守卫:
  · 仅 Tauri 桌面端(__TAURI_INTERNALS__)拦截,纯 web 端透传,不打扰
  · localStorage('bilinote-onboarded') 不为 '1' 时强制跳 /onboarding
- 完成第 4 步 markOnboarded() 写 localStorage 后 navigate('/')

回归风险:纯 web 用户无感知;旧桌面端用户的 localStorage 没这个 key,
首次升级到含此 PR 的版本时会跳一次 onboarding(建议在升级 release notes 里
说明,避免老用户疑惑)。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
huangjianwu
2026-05-09 14:30:05 +08:00
co-authored by Claude Opus 4.7
parent 1329390f98
commit a928e0e38f
2 changed files with 277 additions and 1 deletions
+12 -1
View File
@@ -11,7 +11,17 @@ import Index from '@/pages/Index.tsx'
import { HomePage } from './pages/HomePage/Home.tsx'
// 非首屏页面使用 React.lazy 按需加载
const Onboarding = lazy(() => import('@/pages/Onboarding'))
const SettingPage = lazy(() => import('./pages/SettingPage/index.tsx'))
// 桌面端首启引导守卫:未完成 onboarding 时强制跳到 /onboarding
function OnboardingGuard({ children }: { children: React.ReactNode }) {
const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
// 仅在 Tauri 桌面端拦截;纯 web 端不打扰用户
if (!isTauri) return <>{children}</>
if (localStorage.getItem('bilinote-onboarded') !== '1') return <Navigate to="/onboarding" replace />
return <>{children}</>
}
const Model = lazy(() => import('@/pages/SettingPage/Model.tsx'))
const ProviderForm = lazy(() => import('@/components/Form/modelForm/Form.tsx'))
const AboutPage = lazy(() => import('@/pages/SettingPage/about.tsx'))
@@ -50,7 +60,8 @@ function App() {
<BrowserRouter>
<Suspense fallback={<div className="flex h-screen items-center justify-center"></div>}>
<Routes>
<Route path="/" element={<Index />}>
<Route path="/onboarding" element={<Onboarding />} />
<Route path="/" element={<OnboardingGuard><Index /></OnboardingGuard>}>
<Route index element={<HomePage />} />
<Route path="settings" element={<SettingPage />}>
<Route index element={<Navigate to="model" replace />} />