منصّة واجهات استخدام للمؤسسات

نظام تصميم TCM

نظام تصميم شامل، قابل للوصول، مدفوع بالرموز لمنتجات المؤسسات، النماذج المعقّدة، سير عمل الوسائط الغنية، والتطبيقات كثيفة البيانات.

استكشاف الرموز فتح بيئة اللعب

15مجالات المواصفات

120+مكوّنات وأنماط

AAهدف WCAG

يمكن الوصول إليه افتراضيًا

عناصر تحكم موجهة بلوحة المفاتيح أولًا، تركيز مرئي، حالات ARIA، مناطق حيّة، دعم تقليل الحركة، وأوضاع تباين عالٍ.

هندسة تركيبية

الرموز، والمكونات، وحالة النماذج، والسلوكيات مفصولة بحيث يمكن للفرق دمج React أو Vue أو Angular أو مكوّنات الويب.

على مستوى المؤسسات

الأنماط تغطي شبكات بيانات كثيفة، ونماذج تكيفية، ومديري ملفات، ومعاينة وسائط، وأدوات مطوّرين.

خريطة التغطية

مصفوفة تنفيذ المواصفات

الأساس

رموز التصميم والتنسيق

جميع القرارات البصرية مدفوعة بمتغيرات CSS يمكن تبديلها في وقت التشغيل دون إعادة تحميل الصفحة.

مبدّل السمة في وقت التشغيل

اختر النظام أو الفاتح أو الداكن أو العلامة التجارية المخصصة أو التباين العالي. تُحفَظ التفضيلات باستخدام واجهة برمجة تطبيقات تخزين Miniapps عند توفرها.

اللون الأساسي مقياس نصف القطر الكثافة

معاينة مباشرة للرموز

Primary Secondary Healthy Warning

:root {
  --tcm-color-primary: ...;
  --tcm-radius-md: ...;
}

فئات الرموز

الألوان، والمحارف، والتباعد، والارتفاع، والشفافية، والتدرجات، ومستوى الظهور (z-index)، والحركة، ونقاط التوقف.

عناصر التحكم

عناصر تحكم الإدخال الأساسية

حقول إدخال مُتحقَّقة، ومقنَّعة، وداعمة للوسائط، وبنمط المحرر لمنشئي النماذج المؤسسية.

حقول عادية ورقمية وذات قناع

مربع نص Email كلمة المرور رقم الهاتف عملة النسبة المئوية منطقة نصية

نص منسّق، وMarkdown، ومحرر شيفرة

Bold List Code

<tcm-input required validation="email" />

تحميل الملفات والصور

أسقط الملفات هناصور، PDF، صوت، فيديو حتى 50 ميجابايت

أداة اختيار الألوان

استخدام أداة اختيار الألوان

لوحة التوقيع

مسححفظ التوقيع

التاريخ، الوقت، والتهيئة المحلية

DateTimeDateTime

نطاق، عتامة، ومنزلقات

Size Opacity

Preview

الوسوم، الشرائح، والاختيار المتعدد

أنماط الاختيار

عناصر تحكم التحديد

عناصر تحكم في الاختيار أحادية ومتعددة وهرمية وجغرافية وبصرية وبأسلوب المعالج الإرشادي.

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

▾ Design Tokens
- Colors
- Typography
- Motion
▾ Components
- Inputs
- Data Grid
- Overlays

Stepper

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

البنية

التنقّل والبنية

شريط جانبي متجاوب، شريط علوي، درج، قوائم، مسارات تنقّل، ترقيم صفحات، أوراق سفلية، ومناطق ثابتة.

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu

RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Open bottom sheet

معمارية

معمارية النماذج

نماذج تفاعلية وديناميكية مع مجموعات، ومصفوفات، وتحكّمات متداخلة، واعتمادات، وتحقق غير متزامن، وتخطيطات متكيّفة.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

تفاعل

الأزرار والإجراءات

إجراءات قياسية، إرسال/إعادة تعيين، أزرار أيقونات، روابط تشعبية، تحميل، معطّل، مضغوط، مجموعات إجراءات، وطلب اتصال سريع بزر الإجراء العائم (FAB).

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

الحالة

التغذية الراجعة والمؤشرات

تقدّم، مؤشرات دوران، هياكل عظمية، توست، سنackbar، تنبيهات، إشعارات، شارات، نوافذ منبثقة (مودال)، نوافذ منثورة، وتلميحات أدوات.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.

Storage quota is above 95%.

Database connection failed. Retrying.

Trigger toast

Progress and loading

Open accessible modal

بيانات مؤسسية

عناصر العرض والتحكم في البيانات

جداول، شبكات، تحرير ضمني، فرز، تصفية، تحميل كسول، بطاقات، قوائم، ترقيم صفحات، شريط تمرير (كاروسيل)، معرض، ومشغلات وسائط.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

الأصول

ميزات متقدمة للوسائط والملفات

مدير الملفات، التصفّح عبر المجلّدات، الترتيب بالسحب والإفلات، معاينات الصور/الصوت/الفيديو/ملفات PDF، الضغط، وتدفّقات عمل التحويل.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

التكوين

التخطيطات والحاويات

Flex، الشبكة، الألواح القابلة للطي، المعارض الدوّارة، الأعمدة المتجاوبة، التخطيطات التلقائية، العناصر المُثبتة، وعناصر التحكم في التجاوز.

Responsive auto-layout playground

Flex area

Grid area

Sticky area

Overflow area

Collapsible panel

Panels use semantic disclosure patterns and retain keyboard accessibility.

Overflow controls

Wide content inside a contained scroll region with clear affordances.

الإعدادات

الأدوات المساعدة والإعدادات

الموقع الجغرافي، والخرائط، وقارئات رمز QR/الباركود، وودجات الطقس، ومبدلات السمات، وعناصر التحكم في الخط/الخلفية/الإطار/الظل، وأوضاع الألوان التكيفية.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

نموذج وقت التشغيل

النماذج — إدارة الأحداث والحالة

خطافات دورة الحياة، أحداث التحقق من الصحة، التبعيات، ربط بيانات غير متزامن، تراجع/إعادة، حفظ تلقائي، استعادة، تتبّع الحالة، والرسوم المتحركة.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

إتاحة

إمكانية الوصول وقابلية الاستخدام

ممارسات WCAG 2.1 AA الخاصة بلوحة المفاتيح، وقارئات الشاشة، والتباين، ومؤشرات التركيز، وتقليل الحركة، وقابلية الاستخدام عبر الأجهزة.

Checklist

Live region

Announce status

Contrast AA7.8:1

تكيفي

تصميم متجاوب وتكيفي

تخطيطات موجهة للجوال أولًا، نقاط توقّف تكيفية، أهداف لمس، ألسنة يمكن التمرير بينها، طبقات تراكبية ملائمة بلوحة المفاتيح، وكثافة متجاوبة.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

تجربة المطوّر

دعم TypeScript، تكاملات الأطر، بيئات لعب Storybook، تصدير التوكينات، واجهات برمجة تطبيقات التخصيص (الثيمات)، الاستيراد المعياري، توليد الهياكل عبر سطر الأوامر (CLI)، واتفاقيات التسمية.

TypeScript component API

import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

CLI and token export

npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start