企业级 UI 平台

TCM 设计系统

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

浏览令牌打开 playground

15规范范围

120+组件与模式

AAWCAG 目标

默认无障碍

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

可组合架构

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

企业级规模

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

覆盖图

规范实现矩阵

基础

设计令牌与主题化

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

运行时主题切换器

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

主色圆角尺度密度

实时令牌预览

Primary Secondary Healthy Warning

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

令牌类别

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

控件

核心输入控件

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

标准、数字和掩码字段

文本框 Email 密码电话号码货币百分比文本区域

富文本、Markdown 和代码编辑器

Bold List Code

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

文件和图片上传

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

取色器

使用吸管工具

签名板

清除保存签名

日期、时间与本地化

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

状态

反馈与指示器

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

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

组合

布局与容器

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

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

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 试玩、令牌导出、主题 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