نمایش ورود موفق

پیام موفقیت ورود در TDS یک Alert نیست. ورود موفق یک رویداد تمام‌صفحه است که اطلاعات واقعی کاربر را با انیمیشن نشان می‌دهد و با نشستن تصویر پروفایل او روی آیکون حساب کاربری داک شیشه‌ای تمام می‌شود؛ از آن لحظه داک کاربر را لاگین‌شده نشان می‌دهد. این نمایش بخشی از هویت بصری هر پروژه است، نه کامپوننت: هر پروژه/تم نمایش خودش را در theme/arrival.tsکپی کد می‌سازد و محصول فقط یک تابع صدا می‌زند.

تصمیم با خود پروژه است: چه اطلاعاتی از کاربر نشان داده شود (نام و نام خانوادگی، تصویر پروفایل، لوکیشن، نقش، تیم و هر دادهٔ لازم دیگر) و کل صفحه چطور انیمیت شود. تنها چیز ثابت این است که نمایش با نشستن تصویر پروفایل روی آیکون حساب داک تمام شود.

استفاده در محصول

import { signInSuccess } from '@tokapps/tuk/dock';// پس از تأیید سرور — هر دادهٔ کاربر که نمایش باید نشان دهد اینجا می‌آیدawait signInSuccess({  name: 'سارا محمدی',                       // نام و نام خانوادگی  email: 'sara@example.com',  avatarUrl: '/avatars/sara.jpg',           // تصویر پروفایل — روی آیکون حساب داک می‌نشیند  meta: { location: 'تهران', role: 'طراح محصول', team: 'بنیان' },});router.push('/');

همین. داک (DockProfileItemکپی کد و DockProfileMenuکپی کد) بدون prop از همین نشست می‌خوانند. خروج: signOut()کپی کد.

چه چیزی از کاربر نشان داده می‌شود

نمایش ورود روی شیء کاربر می‌نشیند؛ هر چه محصول لازم دارد را همان‌جا بدهد:

دو کاربرد مهم metaکپی کد و avatarUrlکپی کد در داک هم دیده می‌شوند: آیکون حساب داک همان تصویر پروفایل را نشان می‌دهد و منوی پروفایل از همین داده پر می‌شود.

سه لایه، سه مسئولیت

نمایش‌های موجود

ساخت نمایش تازه برای یک برند

۱. سه پرده را طراحی کنید

هر نمایش سه پرده دارد و موتور زمان هر کدام را از توکن می‌دهد:

1. ظهور (--tds-arrival-introکپی کد): کل صفحه درگیر می‌شود و اطلاعات واقعی کاربر می‌آید — نام و نام خانوادگی، تصویر پروفایل و هر دادهٔ دیگری که محصول داده (metaکپی کد).
2. پرواز (--tds-arrival-flightکپی کد): تصویر پروفایل با ctx.flyToکپی کد به آیکون حساب کاربری داک می‌رود؛ داک «دریافت» می‌کند.
3. نشستن (--tds-arrival-landکپی کد): تصویر واقعی روی آیکون حساب می‌نشیند؛ داک می‌تپد و لاگین‌شده نشان داده می‌شود؛ صحنه کنار می‌رود.

۲. فایل نمایش را بنویسید

packages/theme-<id>/src/arrival.tsکپی کد:

import type { Arrival } from './types';import './pulse.css';export const pulse: Arrival = async (ctx) => {  ctx.part('veil');                                  // پرده‌ی مشترک: تیره و مات، زیر داک  const stage = ctx.part('stage');                   // لایهٔ بالای داک، وسط‌چین  // تصویر پروفایل اگر محصول داده باشد، وگرنه حرف‌اول نام  const avatar = ctx.user.avatarUrl    ? ctx.image('avatar', ctx.user.avatarUrl, stage)    : ctx.part('avatar', ctx.initials, stage);  ctx.part('name', ctx.user.name, stage);            // نام و نام خانوادگی  const meta = [ctx.user.meta?.location, ctx.user.meta?.role].filter(Boolean).join(' · ');  if (meta) ctx.part('meta', meta, stage);           // لوکیشن / نقش / هر دادهٔ لازم دیگر  const shock = ctx.part('shock');                   // موج برخورد مشترک  ctx.phase('intro');  await ctx.wait(ctx.ms('--tds-arrival-intro'));  ctx.phase('flight');  ctx.dockState('receiving');  const c = ctx.targetCenter();  if (c) Object.assign(shock.style, { left: `${c.x}px`, top: `${c.y}px` });  await ctx.flyTo(avatar);                           // تصویر پروفایل روی آیکون حساب داک می‌نشیند  ctx.land();                                        // آواتار واقعی در داک  ctx.phase('land');  ctx.dockState('landed');  await ctx.wait(ctx.ms('--tds-arrival-land'));};

ctxکپی کد همه‌چیزی است که لازم دارید:

۳. CSS را فقط با توکن بنویسید

packages/theme-<id>/src.cssکپی کد — همه‌چیز زیر [data-tds="arrival"][data-style="pulse"]کپی کد:

[data-tds="arrival"][data-style="pulse"] [data-part="avatar"] {  animation: tds-pulse-in calc(var(--tds-arrival-intro) * 0.5) var(--tds-ease-spring) both;}[data-tds="arrival"][data-style="pulse"]:not([data-phase="intro"]) [data-part="name"] {  animation: tds-arrival-fade-out calc(var(--tds-arrival-flight) * 0.3) var(--tds-ease-out) both;}@keyframes tds-pulse-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

اجزای مشترک آماده‌اند: veilکپی کد، stageکپی کد، avatarکپی کد، shockکپی کد و انیمیشن‌های tds-arrival-fade-inکپی کد، tds-arrival-fade-outکپی کد، tds-arrival-riseکپی کد.

۴. ثبت و انتخاب در تم

در packages/theme-<id>/src/arrival.tsکپی کد به arrivalsکپی کد بیفزایید، سپس در تم:

[data-theme="my-brand"] {  --tds-arrival-style: pulse;  --tds-arrival-intro: 1.2s;          /* اختیاری */  --tds-arrival-dock-stops: var(--tds-gradient-featured);  /* رنگ حاشیهٔ داک هنگام دریافت */}

و arrival: 'pulse'کپی کد را در ThemeDefکپی کد (packages/theme-<id>/src.tsکپی کد) بنویسید. برندی بیرون از این مخزن بدون تغییر TDS: registerArrival('pulse', pulse)کپی کد از @tokapps/tuk/dockکپی کد.

قواعد

• نمایش بدون پرواز ناقص است. اگر ctx.flyToکپی کد صدا نشود، تصویر پروفایل هرگز روی آیکون حساب داک نمی‌نشیند؛ validate_agent_outputکپی کد این را با کد auth/arrival-targetکپی کد رد می‌کند.
• اطلاعات باید واقعی باشند. نمایشی که ctx.user.nameکپی کد / ctx.user.avatarUrlکپی کد را نمی‌خواند در هر ورود یکسان می‌ماند (auth/arrival-infoکپی کد).
• فقط توکن. رنگ خام ممنوع؛ گرادیان فقط حاشیهٔ هفت‌رنگ با گذرگاه‌های --tds-gradient-*کپی کد و نشان tds-allow: GradientBorderکپی کد، حداکثر یک عنصر شاخص در هر لحظه، و در data-contrast="high"کپی کد تک‌رنگ.
• داک تنها سطح روشن. پرده زیر داک (--tds-dock-z - 1کپی کد) و آواتار بالای آن (+ 1کپی کد) باشد تا کاربر ببیند آواتار درون داک می‌نشیند.
• کل نمایش زیر ۴ ثانیه. کاربر منتظر ورود است، نه فیلم.
• کاهش حرکت را خودتان پیاده نکنید. موتور با prefers-reduced-motionکپی کد یا کلید کاهش حرکت نمایش را نمی‌سازد و آواتار بی‌درنگ می‌نشیند.
• صفحه‌خوان. root با aria-hiddenکپی کد است؛ موتور پیام «خوش آمدید» را در یک role="status"کپی کد جدا اعلام می‌کند. متن نمایش تزئینی است.
• کد کامپوننت دست نمی‌خورد. نمایش تازه فقط در packages/themesکپی کد و توکن‌های تم.
• پس از تغییر: pnpm check:tokensکپی کد و pnpm --filter @tokapps/tuk testکپی کد.