组件/Onboarding 登录引导

Onboarding 登录引导

从登录、工作区、偏好到系统权限的五步首启引导

自 0.6.0BETA

当前组件文档正在开发中

该页面正在持续迁移,示例与 API 可能会继续调整。

用法

首启引导

「看一遍流程」自动走完前三步并停在权限页,授权只能由你点击。登录与权限均为模拟。

示例加载中...

概述

Tuff 桌面版的首启引导:每一步都是模拟,不发请求,也不申请真实权限。

  • 登录方式与 Tuff 一致:Passkey、GitHub、LINUX DO 与邮箱 Magic Link,没有密码框;「离线继续」跳过工作区一步。
  • 「继续」只在本步满足条件时可用,旁边写明还差什么;「上一步」与已完成的步骤都能回退,换步时焦点移到新步骤标题。
  • 呼出快捷键可录制:组合须含 ⌘、⌃ 或 ⌥,Esc 取消;⌘W、⌘T 这类浏览器保留的组合会被拒绝。
  • 每项权限都要你点「允许访问」;屏幕录制第一次被拒,行内给出「前往系统设置」。
  • 进入视口时只播入场;「看一遍流程」自动走到权限页停下;点击或按键即停止;减少动态效果时直接跳到权限页。
  • 完成页里按下呼出快捷键即唤起迷你 CoreBox;≥ 1200px 右侧出现实时预览,窄屏(< 640px)品牌栏收成顶部一行。

自定义

  • 接真实登录时,把 signIn() 里的计时器换成 OAuth 跳转或 WebAuthn 调用;不要加密码框,Tuff 本就没有密码登录。
  • 接真实权限时,状态从系统读取,「允许访问」触发系统弹窗后重新检查;授权只由用户点击触发。
  • 入场特效(TxTuffLogoStroke 的 once、TxKeyframeStrokeText、TxGlowText 的 :repeat="false")挂载即播:等可见时再挂载,换 key 重播。
  • TxBorderBeam 的旋转家族(sm、md、line)没有减弱动态效果兜底,此时传 :active="false";theme 默认 dark,auto 跟随系统而非站点,要显式传站点主题。
  • TxSteps 没有 emit:回退要在 TxStep 上挂原生 @click,并只给已完成的步骤 clickable。

相关组件

区域组件作用
品牌栏TxTuffLogoStroke、TxKeyframeStrokeText、TxGlowText入场描边与扫光
步骤TxSteps / TxStep、TxProgressBar五步进度,可回退
登录TxBorderBeam、TxButton、TxBadge、TxForm / TxFormItem、TxInput四种登录方式与离线继续
工作区TxRadioGroup / TxRadio、TxFlatRadio、TxAvatar、TxTagInput、TxCard创建个人空间或接受邀请
偏好TxKbd、TxGradientBorder、TxFlatRadio、TxRadioGroup / TxRadio、TuffSwitch快捷键、主题与启动选项
权限TxIconChip、TxTag、TxStatusBadge、TxProgressBar三项权限及其状态
完成TxKeyframeStrokeText、TxGlowText、TxKbd、TxBorderBeam、TxGlassSurface、TxCardItem试按快捷键与设置摘要
切换与反馈TxTransition、TxToastPanel步骤过渡与结果提示
实时预览(宽屏)TxGlassSurface、TxStatusBadge实时预览设置效果