TCM 设计系统

TCM 设计系统

v1
by
V
Vijayraghavan
TCM 设计系统
Loading...
TCM 设计系统
AD
企业级 UI 平台

TCM 设计系统

一个全面的、无障碍的、以令牌驱动的设计系统，适用于企业级产品、复杂表单、富媒体流程和数据密集型应用。

15规范范围
120+组件与模式
AAWCAG 目标

默认无障碍

键盘优先的控件、可见的焦点、ARIA 状态、实时区域、减弱动效支持以及高对比度模式。

可组合架构

令牌、组件、表单状态和行为是分离的，因此团队可以集成 React、Vue、Angular 或 Web Components。

企业级规模

模式涵盖高密度数据网格、自适应表单、文件管理器、媒体预览和开发者工具。

覆盖图

规范实现矩阵

基础

设计令牌与主题化

所有视觉决策都由 CSS 变量驱动，可在运行时切换而无需重新加载页面。

运行时主题切换器

选择系统、浅色、深色、自定义品牌或高对比度。偏好会在可用时通过 Miniapps 存储 API 进行持久化。

实时令牌预览

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

令牌类别

颜色、字体、间距、阴影层级、不透明度、渐变、z-index、动效与断点。

控件

核心输入控件

适用于企业表单构建的已验证、带掩码、支持媒体以及编辑器风格的输入组件。

标准、数字和掩码字段

富文本、Markdown 和代码编辑器

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

文件和图片上传

将文件拖放到此处图片、PDF、音频、视频，最大 50MB

取色器

签名板

日期、时间与本地化

范围、不透明度和滑块

Preview

标签、块和多选

选择模式

选择控件

单选、多选、分层、地理、可视化以及向导式选择控件。

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.

架构

表单架构

具备分组、数组、嵌套控件、依赖关系、异步校验和自适应布局的响应式动态表单。

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

交互

按钮与操作

标准操作、提交/重置、图标按钮、超链接、加载中、禁用、按下状态、操作组和 FAB 快速拨号。

Developer API
状态

反馈与指示器

进度、加载旋转器、骨架屏、吐司、快讯条、警报、通知、徽章、模态框、气泡卡片和工具提示。

Alerts and notifications

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

Progress and loading

企业数据

显示与数据控件

表格、网格、行内编辑、排序、筛选、惰性加载、卡片、列表、分页、轮播、图库和媒体播放器。

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

资源

高级媒体与文件功能

文件管理器、文件夹导航、拖放排序、图像/音频/视频/PDF 预览、压缩和转换工作流。

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    组合

    布局与容器

    弹性布局、网格、可折叠面板、轮播、响应式列、自动布局、粘性元素和溢出控制。

    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.
    设置

    实用工具与设置

    地理定位、地图、二维码/条码扫描器、天气小部件、主题切换器、字体/背景/边框/阴影控制以及自适应配色模式。

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    运行时模型

    表单 — 事件与状态管理

    生命周期钩子、校验事件、依赖关系、异步数据绑定、撤销/重做、自动保存、恢复、状态跟踪和动画。

    Event timeline

    Undo, redo, auto-save

    Idle
    无障碍

    无障碍与可用性

    符合 WCAG 2.1 AA 的键盘、屏幕阅读器、对比度、焦点指示、减少动效以及跨设备可用性实践。

    Checklist

    Live region

    Contrast AA7.8:1
    自适应

    响应式与自适应设计

    移动优先布局、自适应断点、触控目标、可滑动标签、键盘友好型浮层以及响应式密度。

    Breakpoint tokens

    Touch-friendly components

    开发者体验

    开发体验

    TypeScript 支持、框架集成、Storybook 试玩、令牌导出、主题 API、模块化导入、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