Hệ thống thiết kế TCM

Hệ thống thiết kế TCM

v1
by
V
Vijayraghavan
Hệ thống thiết kế TCM
Loading...
Hệ thống Thiết kế TCM
AD
Nền tảng giao diện người dùng cho doanh nghiệp

Hệ thống Thiết kế TCM

Hệ thống thiết kế toàn diện, có khả năng tiếp cận, được dẫn dắt bởi token cho sản phẩm doanh nghiệp, biểu mẫu phức tạp, quy trình làm việc đa phương tiện phong phú và ứng dụng nhiều dữ liệu.

15khu vực đặc tả
120+thành phần & mẫu
AAMục tiêu WCAG

Khả năng tiếp cận mặc định

Điều khiển ưu tiên bàn phím, vùng focus hiển thị rõ, trạng thái ARIA, vùng trực tiếp (live region), hỗ trợ giảm chuyển động và chế độ độ tương phản cao.

Kiến trúc có thể kết hợp

Token, thành phần, trạng thái biểu mẫu và hành vi được tách biệt để nhóm có thể tích hợp React, Vue, Angular hoặc Web Components.

Quy mô doanh nghiệp

Mẫu bao phủ lưới dữ liệu dày đặc, biểu mẫu thích ứng, trình quản lý tệp, xem trước phương tiện và công cụ cho nhà phát triển.

Bản đồ phạm vi bao phủ

Ma trận triển khai đặc tả

Nền tảng

Design Tokens & Theming

Mọi quyết định hiển thị đều được điều khiển bởi các biến CSS có thể được chuyển đổi trong thời gian chạy mà không cần tải lại trang.

Bộ chuyển đổi giao diện khi chạy

Chọn hệ thống, sáng, tối, thương hiệu tùy chỉnh hoặc độ tương phản cao. Tùy chọn của bạn sẽ được lưu lại bằng Miniapps storage API khi khả dụng.

Xem trước token trực tiếp

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

Nhóm token

Màu sắc, kiểu chữ, khoảng cách, độ nâng, độ mờ, dải màu chuyển sắc, z-index, chuyển động và các điểm ngắt.

Điều khiển

Điều khiển nhập liệu cốt lõi

Các trường nhập liệu được kiểm tra, che mặt nạ, hỗ trợ media và dạng trình soạn thảo cho các trình dựng biểu mẫu doanh nghiệp.

Trường chuẩn, số và có mặt nạ

Văn bản phong phú, markdown và trình soạn thảo mã

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

Tải lên tệp và hình ảnh

Thả tệp vào đâyHình ảnh, PDF, âm thanh, video tối đa 50MB

Bộ chọn màu

Bảng ký tên

Ngày, giờ và bản địa hóa

Thanh phạm vi, độ mờ và trượt

Preview

Thẻ, chip và chọn nhiều

Mẫu lựa chọn

Điều khiển lựa chọn

Điều khiển lựa chọn đơn, nhiều, phân cấp, theo vị trí địa lý, trực quan và kiểu trình hướng dẫn (wizard).

Checkbox, radio, toggles

Selectors

Icon, font, shape, pattern

Tree view

    • Colors
    • Typography
    • Motion
    • Inputs
    • Data Grid
    • Overlays

Stepper

  1. Account
  2. Permissions
  3. Review

Tabs and accordion

Advanced options

Expandable panels support keyboard access and nested content.

Kiến trúc

Kiến trúc biểu mẫu

Biểu mẫu phản ứng và động với nhóm, mảng, điều khiển lồng nhau, phụ thuộc, xác thực bất đồng bộ và bố cục thích ứng.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Tương tác

Nút & Hành động

Các thao tác chuẩn, gửi/đặt lại, nút biểu tượng, siêu liên kết, trạng thái tải, vô hiệu, đã nhấn, nhóm hành động và quay số nhanh FAB.

Developer API
Trạng thái

Phản hồi & Chỉ báo

Tiến trình, vòng quay, khung xương, toast, snackbar, cảnh báo, thông báo, huy hiệu, hộp thoại, popover và tooltip.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.
Storage quota is above 95%.
Database connection failed. Retrying.

Progress and loading

Dữ liệu doanh nghiệp

Hiển thị & Điều khiển dữ liệu

Bảng, lưới, chỉnh sửa trực tiếp, sắp xếp, lọc, tải lười, thẻ, danh sách, phân trang, băng chuyền, thư viện và trình phát media.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Tài nguyên

Tính năng Media & Tệp nâng cao

Trình quản lý tệp, điều hướng thư mục, sắp xếp kéo‑thả, xem trước hình ảnh/âm thanh/video/PDF, nén và quy trình chuyển đổi.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Cấu trúc

    Bố cục & Vùng chứa

    Flex, grid, bảng gập, băng chuyền, cột đáp ứng, bố cục tự động, phần tử cố định và điều khiển tràn.

    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.
    Cài đặt

    Tiện ích & Cài đặt

    Định vị địa lý, bản đồ, máy quét QR/mã vạch, tiện ích thời tiết, bộ chuyển đổi giao diện, điều khiển phông nền/viền/đổ bóng và các chế độ màu thích ứng.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Mô hình thời gian chạy

    Biểu mẫu — Sự kiện & Quản lý trạng thái

    Hook vòng đời, sự kiện kiểm tra hợp lệ, phụ thuộc, liên kết dữ liệu bất đồng bộ, hoàn tác/làm lại, tự động lưu, khôi phục, theo dõi trạng thái và hoạt ảnh.

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

    Khả năng truy cập & Khả năng sử dụng

    Thực hành WCAG 2.1 AA cho bàn phím, trình đọc màn hình, độ tương phản, chỉ báo tiêu điểm, giảm chuyển động và khả năng sử dụng trên nhiều thiết bị.

    Checklist

    Live region

    Contrast AA7.8:1
    Thích ứng

    Thiết kế Responsive & Thích ứng

    Bố cục ưu tiên thiết bị di động, breakpoint thích ứng, vùng chạm, tab vuốt được, lớp phủ thân thiện với bàn phím và mật độ giao diện đáp ứng.

    Breakpoint tokens

    Touch-friendly components

    DX

    Trải nghiệm nhà phát triển

    Hỗ trợ TypeScript, tích hợp framework, sân chơi Storybook, xuất token, API chủ đề, import mô-đun, CLI scaffolding và quy ước đặt tên.

    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