01
数据与虚拟化
面向大数据场景的 GridView、TreeGrid、ReportView 与列表组件。
DataGridTreeGridReportViewListView
TYPE-SAFE · CANVAS-NATIVE · BUSINESS-READY
为复杂业务而生的Canvas UI 框架
DirectSurface UI 将桌面级交互、专业数据组件与可预测的渲染架构带到 Web。 用 TypeScript 构建工作台、数据系统和大文档应用，不再受传统 DOM 组件边界限制。
105PUBLIC COMPONENTS
347BEHAVIOR TESTS
175OFFICIAL DOCS
WORKSPACE/Operations
LIVE
ACTIVE JOBS2,481+12.8%
FRAME TIME4.2msSTABLE
RENDER NODES18.6kVIRTUALIZED
PROCESSSTATUSOWNERLATENCY
Clinical document renderRUNNINGruntime3.8 ms
Patient workspace syncREADYstore1.2 ms
Report data projectionRUNNINGgrid5.1 ms
LOCAL PAINTDirty region only
60 FPSVisible nodes
A NEW SURFACE FOR SERIOUS SOFTWARE
网页也可以拥有真正的
桌面软件体验。
DirectSurface UI 不追求“另一个按钮库”。它提供从渲染、布局到复杂组件的完整系统，帮助团队构建长期演进的专业应用。
COMPONENT SYSTEM / 组件系统
覆盖真正复杂的
业务界面。
从基础控件到工作台、大数据表格和文档编辑器，所有组件共享一致的布局、主题、焦点与事件模型。
02
桌面级工作区
用停靠、标签、浮动窗口和命令系统搭建复杂业务工作台。
DockWorkbenchTabsWindowCommand
03
输入与选择
从基础输入到树表下拉、日期与颜色选择，覆盖高密度表单。
TextFieldDatePickerLookupEditDropTree
04
文档与可视化
大文本、Markdown、医疗文书、图表、打印与条码能力。
CodeEditorChartsPrintingMarkdown
RUN IT YOURSELF / 可运行示例
不只展示截图，
直接运行真实组件。
每个功能都建设独立演示项目：运行区使用真实 ds-ui，源码区给出完整 TypeScript 接入方式。综合测试 Demo 继续负责回归验证，不再作为官网宣传素材。
80组件手册
13布局文档
17业务指南
13示例项目
11性能文档
9企业接入
9API 参考
SHOWCASE STANDARD
演示项目只保留理解组件所需的业务操作，并与正式文档和公共包入口保持一致。运行、源码、交互提示与能力说明构成同一个可复用的官网示例单元。
LIVE CANVAS EXAMPLE
查询表格 / DataGrid
独立业务示例，不加载综合测试台，也没有性能浮层与调试按钮。query-grid.ts
正在启动 DirectSurface UI 运行时…
10,000 行虚拟滚动固定列与列宽拖拽排序与列筛选范围选择与复制单元格编辑与校验分组与页脚汇总
试一下：点击表头排序，使用表头筛选；拖动列宽；框选单元格；双击内容编辑；再点击“按状态分组”。
DESIGNED FROM FIRST PRINCIPLES
复杂，但不混乱。
每一层都有明确职责。从事件进入到最终像素输出，开发者始终知道系统正在做什么。
01INPUTPointer · Keyboard · IME
02LAYOUTConstraints · Measure
03PAINTDraw list · Dirty rect
04COMPOSITELayers · Canvas
一套可推理的渲染模型
RenderObject、约束布局、绘制与命中测试形成清晰链路。复杂界面仍然可定位、可调试、可维护。
为高密度业务而生
不是把移动端卡片放大。组件、间距、键盘交互与工作区模型都面向专业桌面式 Web 应用。
只为可见内容付费
虚拟化、局部刷新与可视区域绘制，让大表格、大树和大文档保持稳定响应。
DEVELOPMENT MODEL / 开发模式
优势来自渲染边界，
不只是组件数量。
React、Vue 擅长构建通用 DOM 应用；DirectSurface UI 把布局、绘制、命中测试、焦点和合成收进同一套可推理的运行时，换取专业软件需要的一致性与控制力。
COMMON WEBReact / Vue
StateComponent / TemplateDOMCSS Layout & Paint
充分利用浏览器标准、可访问性和 Web 生态，适合大多数网站与常规产品应用。
DIRECT SURFACEDirectSurface UI
Business StateRenderObject TreeConstraint LayoutDraw & Composite
业务状态直接驱动可布局、可绘制、可命中测试的对象树；脏布局、脏绘制和脏图层只处理发生变化的部分。
交互模型一致
窗口、弹层、表格、文档、选择与焦点共享同一事件和坐标体系，减少跨组件缝隙。
性能边界明确
从状态变化到布局、绘制和合成均可观测；虚拟化与局部刷新不是事后补丁。
专业控件可下沉
复杂能力放在可复用框架层，业务页只负责组合、状态连接和领域流程。
长期行为可验证
347 项行为测试和 175 篇正式文档共同约束公共 API、运行时和组件契约。
BALANCED COMPARISON
DirectSurface UI vs React vs Vue
它不是 React/Vue 的通用替代品，而是针对专业工作台的一条更垂直的技术路线。
| 维度 | DirectSurface UI | React | Vue |
|---|---|---|---|
| 核心定位 | 面向高密度、桌面式业务软件的 Canvas UI 框架 | 构建通用 Web 与原生界面的 UI 库 | 渐进式 Web UI 框架 |
| 渲染载体 | RenderObject 树直接布局、绘制并合成到 Canvas | 通常由 react-dom 更新浏览器 DOM | 模板编译为渲染函数，以虚拟 DOM 更新真实 DOM |
| 布局与绘制 | 约束布局、绘制列表、脏区和图层由框架统一控制 | 布局与绘制主要交给 HTML/CSS 和浏览器 | 布局与绘制主要交给 HTML/CSS 和浏览器 |
| 复杂工作区 | Dock、Window、Tabs、Command、Popup 与业务组件使用同一模型 | 通常组合组件库或自行建设工作台能力 | 通常组合组件库或自行建设工作台能力 |
| 大数据/大文档 | 虚拟化、局部刷新、可见区域绘制是核心路径 | 依赖具体组件、虚拟列表库与应用优化 | 依赖具体组件、虚拟列表库与应用优化 |
| 生态与人才 | 生态较小，需要理解 RenderObject 与约束布局 | 生态、社区与招聘市场成熟 | 生态成熟，模板与响应式模型上手直接 |
| 可访问性与 SEO | Canvas 语义需额外桥接，不适合纯内容与 SEO 优先页面 | 标准 DOM 语义和框架级 SSR 方案更自然 | 标准 DOM 语义和 SSR/SSG 方案更自然 |
| 最适合 | 数据工作台、医疗文书、工业系统、研发工具 | 门户、内容、表单、产品应用与跨端生态 | 中后台、内容、表单与渐进式 Web 应用 |
CHOOSE DOM
优先选择 React / Vue
营销站、内容站、SEO、标准可访问性、普通表单，以及需要最大化复用 Web 生态时。
CHOOSE DIRECTSURFACE UI
优先选择 DirectSurface UI
长时间运行的高密度工作台、复杂 Grid/Tree/Document，以及需要统一像素与交互控制时。
HYBRID
也可以混合使用
用 DOM 承载站点壳层和标准内容，在核心专业工作区嵌入 DirectSurface UI。
BUILT FOR REAL WORK
不仅能展示，
更能承载业务。
适用于医疗、工业、运营、研发工具等需要高信息密度与长时间交互的专业场景。
CLINICAL WORKSPACE
DATA OPERATIONS
大数据维护
虚拟表格、树表、筛选与键盘导航。
RUNTIME DIAGNOSTICS
运行时可观测
从帧耗时定位到具体脏对象与调用链路。
INTEGRATION PREVIEW / 接入预览
用熟悉的 TypeScript，
构建不一样的界面。
以下代码展示页面组合思路；完整安装、Canvas 宿主创建、应用挂载与运行步骤请进入快速开始文档。
hello_page.tsTypeScript
01import { RenderButton, RenderPage, RenderStackPanel, RenderText } 02from 'ds-ui'0304export class HelloPage extends RenderPage {05 constructor() {06 const content = new RenderStackPanel({07 orientation: 'vertical', spacing: 12,08 })0910 content.addChild(new RenderText('Hello, Canvas.'))11 content.addChild(new RenderButton({12 label: '开始构建', onClick: () => launch(),13 }))14 super({ child: content })15 }16}THE SURFACE IS YOURS
让下一款复杂 Web 应用，
从 Canvas 开始。
DirectSurface UI / DirectSurface UI — 为专业软件重新定义前端界面。
回到顶部