قالب پروژه (تولید تم)

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

بخش	کجا تعریف می‌شود	نمونه
رنگ و شعاع و وزن تیتر
سیاست داک (کلیدهای ثابت و گروه‌بندی)	←	،
ساعت داک	←
نمایش ورود موفق اختصاصی	+
الگوی صفحه	←

ساختار پوشه

code

theme/├── meta.ts        فراداده (ProductThemeMeta از @tokapps/tokens)├── theme.css      توکن‌های مجاز زیر [data-theme="tokapps"]├── arrival.ts     نمایش ورود اختصاصی (Arrival)├── arrival.css    حرکت نمایش ورود با توکن زمان└── index.ts       import تم پایه + CSS + registerArrival

۱. فراداده ()

TypeScript

import type { ProductThemeMeta } from '@tokapps/tokens';export const meta: ProductThemeMeta = {  id: 'shop',  name: 'Shop Template',  nameFa: 'قالب فروشگاه',  description: 'مسی گرم با نمایش ورود منشوری',  product: 'فروشگاه نمونه',  hue: 35, chroma: 0.12, radiusScale: 1.15, headingWeight: 700,  density: 1, motion: 'soft', illustration: 'editorial', icons: null,  arrival: 'prism',  codeScheme: 'dark',  dockClock: { calendar: 'jalali', face: 'digital' },  dock: {    slots: { menu: false, search: false, mode: false, sound: false, profile: true, clock: true },    groupable: ['shop:*'],  },  layout: 'campaign',};

کلیدهای ثابت را روشن یا خاموش می‌کند. موقعیت‌ها ثابت‌اند و جابه‌جا نمی‌شوند.
فهرست آیتم‌هایی است که اجازه دارند زیر «پوشه» بروند. آیتم‌ها باید داشته باشند (مثلاً ).
باید یکی از ، ، ، ، ، باشد.

۲. توکن‌ها ()

فقط توکن‌های مجاز. کامپوننت‌ها و رنگ خام نوشته نمی‌شوند.

CSS

[data-theme='tokapps'] {  --tds-accent-hue: 35;  --tds-accent-chroma: 0.12;  --tds-radius-scale: 1.15;  --tds-font-weight-heading: 700;  --tds-arrival-style: prism;  --tds-arrival-intro: 1.1s;  --tds-arrival-flight: 0.9s;  --tds-arrival-land: 0.6s;}

۳. نمایش ورود اختصاصی ()

هر قالب یک نمایش ورود دارد که بین «ورود موفق» و «نشستن آواتار در داک» دیده می‌شود. موتور زمان‌بندی، پرواز و کاهش حرکت را مدیریت می‌کند.

TypeScript

import type { Arrival } from '@tokapps/tuk/dock';import './arrival.css';export const prism: Arrival = async (ctx) => {  ctx.part('veil');  const stage = ctx.part('stage');  const avatar = ctx.part('avatar', ctx.initials, stage);  ctx.part('name', ctx.user.name, 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'));};

قواعد: فقط توکن، زیر ۴ ثانیه، بدون رنگ خام. انیمیشن‌ها باید را هدف بگیرند و را نادیده نگیرند.

۴. ثبت ()

TypeScript

import '@tokapps/theme-tokapps';   // هویت پایهimport './theme.css';import { registerArrival } from '@tokapps/tuk/dock';import { prism } from './arrival';import { meta } from './meta';export { meta } from './meta';registerArrival(meta.arrival, prism);

و در این پوشه را import کنید (نه فقط تم پایه):

TSX

import '../theme';

۵. مصرف فراداده در داک

داک باید سیاست را از بخواند، نه مقدار ثابت:

TSX

const slots: DockSlots = {};if (meta.dock.slots.profile) slots.profile = <DockProfileItem signInHref="/login" />;if (meta.dock.slots.clock) slots.clock = <DockClock calendar={meta.dockClock.calendar} face={meta.dockClock.face} compact />;<Dock slots={slots} groupable={meta.dock.groupable}>…</Dock>

۶. ورود موفق

قرارداد نمایش ورود: پس از تأیید سرور، را صدا بزنید؛ سپس با ناوبری سمت کلاینت بروید تا نشست داک حفظ شود.

TSX

await signInSuccess({ name, email });router.replace('/dashboard');

چک‌لیست قالب

با منوی داکت، جستجو، واکنش‌گرایی داکت، کانال‌ها، هشدارها و ورود
همهٔ صفحه‌ها از کامپوننت‌های دیزاین‌کیت استفاده می‌کنند؛ عنصر خام نیست و هر Button کانال چاپ دارد
با همهٔ فیلدهای و هر شش کلید داکت () فعال
فقط توکن‌های مجاز
و با نام یکتا و بدون رنگ خام
تم پایه، CSS و را دارد
پوشهٔ را import می‌کند و داک را از می‌خواند
صفحهٔ ورود با و انیمیشن قالب
و بدون خطا

قالب‌های نصب‌شده در مستندات

تم‌های ، ، ، ، و در مونوریپو نمونهٔ کامل این قرارداد هستند؛ هر کدام پوشهٔ با همین ساختار دارد.

قالب پروژه (تولید تم)

بخش	کجا تعریف می‌شود	نمونه
رنگ و شعاع و وزن تیتر
سیاست داک (کلیدهای ثابت و گروه‌بندی)	←	،
ساعت داک	←
نمایش ورود موفق اختصاصی	+
الگوی صفحه	←

ساختار پوشه

code

theme/├── meta.ts        فراداده (ProductThemeMeta از @tokapps/tokens)├── theme.css      توکن‌های مجاز زیر [data-theme="tokapps"]├── arrival.ts     نمایش ورود اختصاصی (Arrival)├── arrival.css    حرکت نمایش ورود با توکن زمان└── index.ts       import تم پایه + CSS + registerArrival

۱. فراداده ()

TypeScript

import type { ProductThemeMeta } from '@tokapps/tokens';export const meta: ProductThemeMeta = {  id: 'shop',  name: 'Shop Template',  nameFa: 'قالب فروشگاه',  description: 'مسی گرم با نمایش ورود منشوری',  product: 'فروشگاه نمونه',  hue: 35, chroma: 0.12, radiusScale: 1.15, headingWeight: 700,  density: 1, motion: 'soft', illustration: 'editorial', icons: null,  arrival: 'prism',  codeScheme: 'dark',  dockClock: { calendar: 'jalali', face: 'digital' },  dock: {    slots: { menu: false, search: false, mode: false, sound: false, profile: true, clock: true },    groupable: ['shop:*'],  },  layout: 'campaign',};

کلیدهای ثابت را روشن یا خاموش می‌کند. موقعیت‌ها ثابت‌اند و جابه‌جا نمی‌شوند.
فهرست آیتم‌هایی است که اجازه دارند زیر «پوشه» بروند. آیتم‌ها باید داشته باشند (مثلاً ).
باید یکی از ، ، ، ، ، باشد.

۲. توکن‌ها ()

فقط توکن‌های مجاز. کامپوننت‌ها و رنگ خام نوشته نمی‌شوند.

CSS

[data-theme='tokapps'] {  --tds-accent-hue: 35;  --tds-accent-chroma: 0.12;  --tds-radius-scale: 1.15;  --tds-font-weight-heading: 700;  --tds-arrival-style: prism;  --tds-arrival-intro: 1.1s;  --tds-arrival-flight: 0.9s;  --tds-arrival-land: 0.6s;}

۳. نمایش ورود اختصاصی ()

TypeScript

import type { Arrival } from '@tokapps/tuk/dock';import './arrival.css';export const prism: Arrival = async (ctx) => {  ctx.part('veil');  const stage = ctx.part('stage');  const avatar = ctx.part('avatar', ctx.initials, stage);  ctx.part('name', ctx.user.name, 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'));};

قواعد: فقط توکن، زیر ۴ ثانیه، بدون رنگ خام. انیمیشن‌ها باید را هدف بگیرند و را نادیده نگیرند.

۴. ثبت ()

TypeScript

import '@tokapps/theme-tokapps';   // هویت پایهimport './theme.css';import { registerArrival } from '@tokapps/tuk/dock';import { prism } from './arrival';import { meta } from './meta';export { meta } from './meta';registerArrival(meta.arrival, prism);

و در این پوشه را import کنید (نه فقط تم پایه):

TSX

import '../theme';

۵. مصرف فراداده در داک

داک باید سیاست را از بخواند، نه مقدار ثابت:

TSX

const slots: DockSlots = {};if (meta.dock.slots.profile) slots.profile = <DockProfileItem signInHref="/login" />;if (meta.dock.slots.clock) slots.clock = <DockClock calendar={meta.dockClock.calendar} face={meta.dockClock.face} compact />;<Dock slots={slots} groupable={meta.dock.groupable}>…</Dock>

۶. ورود موفق

قرارداد نمایش ورود: پس از تأیید سرور، را صدا بزنید؛ سپس با ناوبری سمت کلاینت بروید تا نشست داک حفظ شود.

TSX

await signInSuccess({ name, email });router.replace('/dashboard');

چک‌لیست قالب

با منوی داکت، جستجو، واکنش‌گرایی داکت، کانال‌ها، هشدارها و ورود
همهٔ صفحه‌ها از کامپوننت‌های دیزاین‌کیت استفاده می‌کنند؛ عنصر خام نیست و هر Button کانال چاپ دارد
با همهٔ فیلدهای و هر شش کلید داکت () فعال
فقط توکن‌های مجاز
و با نام یکتا و بدون رنگ خام
تم پایه، CSS و را دارد
پوشهٔ را import می‌کند و داک را از می‌خواند
صفحهٔ ورود با و انیمیشن قالب
و بدون خطا

قالب‌های نصب‌شده در مستندات

تم‌های ، ، ، ، و در مونوریپو نمونهٔ کامل این قرارداد هستند؛ هر کدام پوشهٔ با همین ساختار دارد.

قالب پروژه (تولید تم)

ساختار پوشه

۱. فراداده (meta.tsکپی کدکپی کد)

۲. توکن‌ها (theme.cssکپی کدکپی کد)

۳. نمایش ورود اختصاصی (arrival.tsکپی کدکپی کد)

۴. ثبت (index.tsکپی کدکپی کد)

۵. مصرف فراداده در داک

۶. ورود موفق

چک‌لیست قالب

قالب‌های نصب‌شده در مستندات

قالب پروژه (تولید تم)

ساختار پوشه

۱. فراداده (meta.tsکپی کدکپی کد)

۲. توکن‌ها (theme.cssکپی کدکپی کد)

۳. نمایش ورود اختصاصی (arrival.tsکپی کدکپی کد)

۴. ثبت (index.tsکپی کدکپی کد)

۵. مصرف فراداده در داک

۶. ورود موفق

چک‌لیست قالب

قالب‌های نصب‌شده در مستندات

۱. فراداده ()

۲. توکن‌ها ()

۳. نمایش ورود اختصاصی ()

۴. ثبت ()

۱. فراداده ()

۲. توکن‌ها ()

۳. نمایش ورود اختصاصی ()

۴. ثبت ()